vue1.x升级vue2.x，使用字符串模板，页面没办法渲染

问题详情

1. 项目中原使用vue1.x，现升级到2.x

2. 如图，项目中使用.html文件，并在js文件中引入该文件，使用template字符串渲染vue模板

   // index.js
   import template from './index.html'
   export default {
       template: template,
       data() {
           ...
       },
       ...
   }
   

在vue1.x中项目可正常运行，升级至vue2.x，页面无法渲染

问题分析

vue不同构建版本

vue1.x 不区分运行时和完整版，vue2.x默认使用运行时版本

完整版包含运行时 编译器，编译器作用：将模板字符串编译成js渲染函数

图片来源：vue2官网

模板编译

模板字符串编译

模板字符串解析需要编译器，所以需要引入完整版vue

图片来源：vue2官网

vm.$mount

完整版和运行时的区别在于是否有模板编译阶段，其主要表现在vm.$mount方法的实现上。

只包含运行时版本的$mount方法获取到DOM后直接进入挂载阶段。而完整版的$mount中先进行模板编译，编译成渲染函数；再回过头调用（与只包含运行时版本相同的）$mount，进入挂载阶段。

详见: Vue源码系列-Vue中文社区

vue-loader预编译

运行时版本不包含模板编译阶段，配合vue-loader进行预编译。vue-loader对.vue文件中的<template>预编译成渲染函数。所以不存在模板编译阶段，运行时版可由初始化直接进入挂载阶段。

预编译优势

很明显，编译过程对性能造成损耗，生产环境引入编译也增大了代码体积。所以预编译提高了运行时的性能，vue运行时版本减少了生产环境代码。

解决方案

webpack配置别名（使用模板字符串编译器）

配置来源：vue2官网

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    }
  }
}

vue cli配置runtimeCompiler（使用模板字符串编译器）

图片来源：vue cli 官网

推荐

不使用模板字符串写法，改为<template>

这篇好文章是转载于：学新通技术网