关于vue编译版本引入的问题的解决


Posted in Javascript onSeptember 17, 2018

下班过目遇到一个错误

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

根据错误提示说明,和搜索之后得出结论:是项目引入的vue编译版本不对

解决方案1

build/webpack.base.conf.js 并设置vue的alias别名,如下:

resolve: {
   alias: {
    vue: 'vue/dist/vue.esm.js'
   }
  }

解决方案2

打开src/main.js修改Vue对象初始化。

new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

改为

new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

原因是,使用 template属性,需要引入带编译器的完整版的vue.esm.js

而如果在.vue文件里面使用

<template>
 <div></div>
</template>
<script>
export default {
 name:'name1',
 data() {
  return {};
 }
};
</script>

这种形式,然后使用import引入,则不需要完整版的vue.esm.js,因为使用vue-loader时 *.vue文件会自动预编译成js。

其实vuejs官网中已有明确说明

对不同构建版本的解释(https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A)

其他相关文章:

理顺8个版本vue的区别(https://3water.com/article/147538.htm)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
理顺8个版本vue的区别(小结)
Sep 17 #Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 #Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 #Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 #Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 #Javascript
Puppet的一些技巧
Sep 17 #Javascript
详解JavaScript添加给定的标签选项
Sep 17 #Javascript
You might like
ip签名探针
2006/10/09 PHP
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
python 列表删除所有指定元素的方法
2018/04/19 Python
python2.7实现邮件发送功能
2018/12/12 Python
python 默认参数相关知识详解
2019/09/18 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
用 Python 制作地球仪的方法
2020/04/24 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
创立科技Java面试题
2015/11/29 面试题
11月红领巾广播稿
2014/01/17 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
反邪教观后感
2015/06/11 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Java 多线程并发FutureTask
2022/06/28 Java/Android