关于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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
preg_match_all使用心得分享
2014/01/31 PHP
PHP之预定义接口详解
2015/07/29 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python直接访问私有属性的简单方法
2016/07/25 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
初三毕业评语
2014/12/26 职场文书
高三语文复习计划
2015/01/19 职场文书
加薪申请报告范本
2015/05/15 职场文书
仰望星空观后感
2015/06/10 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
详解Js模块化的作用原理和方案
2021/04/29 Javascript
mysql如何能有效防止删库跑路
2021/10/05 MySQL
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server