You are using the runtime-only build of Vue where the template compiler is not available. Either pre
在升级脚手架到vue-cli3.0版本的时候出现了这个报错:
[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有两种形式的代码 compiler(模板)模式和runtime模式(运行时),vue模块的package.json的main字段默认为runtime模式, 指向了"dist/vue.runtime.common.js"位置。
这是vue升级到2.0之后就有的特点。
而我的main.js文件中,初始化vue却是这么写的,这种形式为compiler模式的,所以就会出现上面的错误信息
// compiler
new Vue({
el: '#app',
router: router,
store: store,
template: '<App/>',
components: { App }
})
解决办法
将main.js中的代码修改如下就可以
//runtime new Vue({
router,
store,
render: h => h(App)
}).$mount("#app")
到这里我们的问题还没完,那为什么之前是没问题的,之前vue版本也是2.x的呀?
这也是我要说的第二种解决办法
因为之前我们的webpack配置文件里有个别名配置,具体如下
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式 vue结尾的
}
}
也就是说,import Vue from ‘vue’ 这行代码被解析为 import Vue from ‘vue/dist/vue.esm.js’,直接指定了文件的位置,没有使用main字段默认的文件位置
所以第二种解决方法就是,在vue.config.js文件里加上webpack的如下配置即可,
configureWebpack: {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
既然到了这里我想很多人也会想到第三中解决方法,那就是在引用vue时,直接写成如下即可
import Vue from 'vue/dist/vue.esm.js'
You are using the runtime-only build of Vue where the template compiler is not available. Either pre的更多相关文章
- You are using the runtime-only build of Vue where the template compiler is not available.
使用vue-cli搭建的项目,启动报错 You are using the runtime-only build of Vue where the template compiler is not a ...
- 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.
异常 You are using the runtime-only build of Vue where the template compiler is not available. Either ...
- [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.
转载自:https://segmentfault.com/a/1190000006435886 解决办法:添加package.config.js配置文件中,添加本文章的红色部分代码 import vu ...
- [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available
原文链接https://blog.csdn.net/xiaomajia029/article/details/88320233 问题描述: 原因分析:在项目配置的时候,默认 npm 包导出的是运行时构 ...
- Vue项目用了脚手架vue-cli3.0,会报错You are using the runtime-only build of Vue where the template compiler is not available.....
摘自: https://blog.csdn.net/wxl1555/article/details/83187647 报错信息如下图: 报错原因是:vue有两种形式的代码:一种是compiler(模版 ...
- Vue Cli 报错:You are using the runtime-only build of Vue where the template compiler is not availabl
报错原因: 这里引用的是vue.runtime.esm.js,造成的不能正常运行. vue-cli 2.x 解决方法: 在webpack.base.conf.js配置文件中多加了一段代码,将 vue/ ...
- vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决
在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...
- eclipse中build path 中JDK与java compiler compliance level的问题(转)
roject facets做什么用? http://baike.baidu.com/view/6257360.htm,其实我感觉,就是让我们在创建项目时候,可以独立定义一个有一个模板供我们使用,在里面 ...
- WebStorm 使用webpack打包(build) Vue 静态资源无法访问(路径不对)问题
在WebStorm中使用webpack打包 (命令npm run build) 后生成在项目的dist目录下,在浏览器打开,静态资源js.css等无法加载.因为打包时,资源使用了绝对路径. 解决: 打 ...
随机推荐
- php连接mySql,加密函数
连接MySQL mysql_connect(servername,username,password); 面向对象: <?php $servername = "localhost&qu ...
- Python_模块的定义与使用
1.模块的定义: 1.1 标准格式: import 模块名 模块名.函数名(实参列表) 1.2 特殊格式: from 模块名 import 函数名1,函数名2... 函数名(实参列表) 2.模块的使用 ...
- 使用Cloudera Manager搭建Impala环境
使用Cloudera Manager搭建Impala服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用CM安装Imapala 1>.进入CM的服务安装向导 2> ...
- C++(四十二) — 函数模板多态
1.函数模板(参数多态) 相当于一个函数发生器,参数多态,可以重载. 普通函数和模板函数的本质区别: 普通函数的调用,可以进行隐式的类型转换: 函数模板的调用,使用类型参数化,严格按照类型进行匹配, ...
- linux系统编程之信号(七)
今天继续学习信号,主要是学习关于时间和定时器相关的函数的使用,关于这个实际上有很多内容,这里先简要进行说明,等之后再慢慢进行相关深入,也主要是为接下来要做的一个综合linux系统编程的例子做准备,好了 ...
- springboot集成thymeleaf中遇到不能反悔页面,只能反悔字符串
错误:::::不能返回页面,只能返回字符串 原因::::在controller中使用了注解@RestController 修改注解为:@Controller 分析: RestController = ...
- 《hello-world》第九次团队作业:Beta冲刺与验收准备
项目 内容 这个作业属于哪个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十三 团队作业9:Beta冲刺与团队项目验收 团队名称 <hello--wor ...
- 行为型模式(八) 职责链模式(Chain of Responsibility)
一.动机(Motivate) 在软件构建过程中,一个请求可能被多个对象处理,但是每个请求在运行时只能有一个接受者,如果显示指定,将必不可少地带来请求发送者与接受者的紧耦合.如何使请求的发送者不需要指定 ...
- 多线程实现的方式一继承Thread
实现方法一:继承Thread类 package thread; /** * @function 多线程继承Thread类 * @author hj */ public class Threads ex ...
- python会缓存小的整数和短小的字符
经过测试,python会缓存的小整数的范围是 [-5, 256] # True a = 1 b = 1 print(a is b) # True a = "good" b = &q ...