Vue.js渲染问题：页面显示正常但源码中插值表达式未替换如何解决？

嘿，我之前也碰到过这个困惑！让我给你捋清楚原因和解决方案：

为什么页面源码里还是显示{{pageName}}？ #

这是因为你现在用的是Vue的客户端渲染模式：

• 浏览器首先从服务器拿到原始的HTML文件，里面就包含那些插值表达式{{}}
• 然后浏览器加载并执行Vue.js脚本，Vue才会在客户端把这些表达式替换成实际的数据，所以你在页面上能看到正常内容，但源码还是服务器返回的原始HTML

怎么让源码里直接显示实际值？ #

要实现这个，你需要用服务端渲染(SSR)或者静态站点生成(SSG)，让服务器在返回HTML之前就把Vue组件渲染成包含实际数据的静态HTML。

Vue官方推荐的Nuxt.js框架可以轻松做到这一点，给你举个简单的例子：

1. 用Nuxt.js创建一个页面组件（比如pages/index.vue）：

<template>
  <div id="header">
    <h5>{{ pageName }}</h5>
    <p>{{ pageSubtitle }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageName: 'CuteCat',
      pageSubtitle: 'World of cats'
    }
  }
}
</script>

2. 如果你用静态站点生成（适合内容不常变的场景），运行npm run generate，Nuxt会生成完全静态的HTML文件，打开这些文件的源码就能看到已经替换好的实际内容；
3. 如果你用服务端渲染（适合动态内容），运行npm run build && npm run start，启动服务后，服务器返回的HTML源码里就直接是渲染好的内容了。

额外小技巧：避免页面加载时的表达式闪现 #

如果你暂时不想用SSR/SSG，只是想避免用户在页面加载过程中看到{{}}的闪现，可以用Vue的v-text指令替代插值表达式：

<div id="header">
  <h5 v-text="pageName"></h5>
  <p v-text="pageSubtitle"></p>
</div>

不过要注意，这个方法只是客户端渲染的优化，页面源码里还是会显示v-text指令，不会替换成实际值，所以如果你的核心需求是让源码里有实际内容，还是得用SSR/SSG方案。

内容的提问来源于stack exchange，提问作者DunDev