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>

相关推荐
编程猪猪侠20 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞24 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架