Hexo 中如何在页面里使用 Vue 组件并正确渲染？

博主文阁提问于 2026-03-19 10:55:21 阅读 7

框架

我最近在用 Hexo 搭建一个静态博客，想在某篇 post 里嵌入一个简单的 Vue 组件做交互。我把 Vue 的 CDN 引入了 layout，也在文章里写了组件代码，但页面只显示原始模板，根本没被 Vue 渲染。

我试过把 el 挂载到 #app，也确认了 Vue 脚本加载顺序没问题，但就是不生效。是不是 Hexo 的 SSR 机制导致 Vue 无法在客户端运行？下面是我写的那段代码：

<div id="app">
  <p>{{ message }}</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello from Vue!'
    }
  })
</script>

我来解答赞 2 收藏

反馈

2 条解答

ლ宝玲 Lv1

Hexo 默认会用 Nunjucks 渲染 {{ message }}，还没到浏览器就被干掉了。用 raw 标签包裹一下就行：

{% raw %}



  {{ message }}






{% endraw %}

或者把 Vue 代码单独写成 js 文件，在文章里用 script 标签引入，这样更干净，也不容易踩到 Hexo 模板引擎的坑。

2026-03-19 19:02

IT人英歌 Lv1

Hexo 的 Markdown 渲染器会把 {{ }} 当作模板变量处理，所以你的 Vue 语法还没到浏览器就被干掉了。

两个解决办法：

一、把代码放在 HTML 块里，防止 Hexo 处理

{% raw %}

<div id="app">

  <p>{{ message }}</p>

</div>

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

<script>

  new Vue({

    el: '#app',

    data: {

      message: 'Hello from Vue!'

    }

  })

</script>

{% endraw %}

关键是用 {% raw %} 和 {% endraw %} 包裹，告诉 Hexo 别处理里面的内容。

二、用 v-pre 指令

如果上面不行，可以试试在根元素上加 v-pre，这样 Vue 会跳过编译这部分：

<div id="app" v-pre>

  <p>{{ message }}</p>

</div>

另外确保 Vue 的 CDN 在你的代码之前加载，而且最好放到前。

如果你的 Hexo 主题有 jQuery 或者其他库冲突，也可能导致 Vue 不生效，可以先检查控制台有没有报错。

2026-03-19 11:03