Vue.js 2.6.14项目搭建后插值未渲染无报错该如何排查？

问题原因 #

你当前引入的是runtime-only版本的Vue 2，该版本不包含模板编译器，仅支持处理预先编译完成的render函数，无法识别、编译写在HTML文件中的{{ }}模板语法，因此会直接保留原DOM内容，不会做插值替换。
因为runtime-only版本不会主动解析挂载目标DOM的内部模板内容，所以不会抛出缺少编译器的相关报错，符合你描述的无报错但页面未渲染的现象。

解决方法 #

你可以选择以下任意一种方案修复：

• 方案一：调整webpack配置，引入带编译器的Vue完整版
  在你的webpack.config.js中添加如下配置：

module.exports = {
  // 其他现有配置
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 指定import 'vue'时引入带编译器的完整版
    }
  }
}

修改后重新编译项目即可正常渲染HTML中的模板语法。

• 方案二：改用runtime-only版本支持的render函数写法
  无需修改webpack配置，直接修改main.js代码即可：

import Vue from "vue";
new Vue({
  data: {
    message: 'Hello Vue!'
  },
  render(h) {
    return h('div', {
      attrs: { id: 'app' }
    }, this.message)
  }
}).$mount('#app')

如果后续使用单文件组件（.vue文件）开发，vue-loader会自动将组件内的模板编译为render函数，直接使用runtime-only版本即可正常运行，无需额外配置。

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