vue1.x升级vue2.x,使用字符串模板,页面无法渲染

问题详情

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

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

    arduino 复制代码
    // 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官网

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

vue cli配置runtimeCompiler(使用模板字符串编译器)

图片来源:vue cli 官网

推荐

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

相关推荐
王景程4 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常27 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中32 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木36 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand2 小时前
Dhtmlx Gantt教程
前端