webpack 安装vue（两种代码模式compiler 和runtime）

使用webpack安装vue，import之后，运营项目报错，如下：

[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模式，所以就会出现上面的错误信息；

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

解决办法：

1 修改Vue实例的写法：

new Vue({render:h=>h(App)
}).$mount('#app')；

用vue-cli搭建的项目没有问题，原因是webpack配置文件中有个别名配置：

resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式 vue结尾的 } }

也就是说import Vue from 'vue' 这行代码被解析为import Vue from ‘vue/dist/vue.esm.js’,直接指定了文件的位置，没有使用main字段默认的文件位置

在vue-cli3中需要配置：

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

或者直接这样写：

import Vue from 'vue/dist/vue.esm.js

来自：https://blog.csdn.net/wxl1555/article/details/83187647

转载于:https://www.cnblogs.com/xiaofenguo/p/11382601.html

webpack 安装vue（两种代码模式compiler 和runtime）相关推荐

ActiveMQ的两种消息模式及实现代码
消息列队有两种消息模式,一种是点对点的消息模式,还有一种就是订阅的模式. (1).点对点方式(point-to-point) 点对点的消息发送方式主要建立在 Message Queue,Sender, ...
matlab安装程序无法启动jvm_天呀！JVM居然还有2两种运行模式
概述 JVM有两种运行模式Server与Client.两种模式的区别在于,Client模式启动速度较快,Server模式启动较慢:但是启动进入稳定期长期运行之后Server模式的程序运行速度比Clie ...
一步一步学FRDM-KE02Z(一)：IAR调试平台搭建以及OpenSDA两种工作模式设置
摘要:FRDM-KE02Z是飞思卡尔公司较为新的微控制器,学习和开发资料较少.从本篇开始会陆续介绍其相关的开发流程,并完成一个小型的工程项目.这是本系列博客的第一篇,主要介绍开发环境IAR for A ...
bootloader的两种启动模式
启动模式介绍大多数 Boot Loader 都包含两种不同的操作模式:"启动加载"模式和"下载"模式,这种区别仅对于开发人员才有意义.但从最终用户的 ...
微前端：qiankun的两种运作模式
背景微前端 qiankun 有两种运作模式: 1.使用 registerMicroApps + start,这是挂自动档,路由改变,重新load子应用. 2.使用 loadMicroApp,每次路由 ...
javaweb学习总结(二十一)——JavaWeb的两种开发模式
SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. 一.JSP+JavaBean开发模式 1 ...
calico的两种网络模式BGP和IP-IP性能分析
目前使用较多的网络插件有 flannel,calico,canel等,但是如果对比以上几种网络插件的性能,还是calico最受欢迎一.calico概述二.性能评测指标三.物理机性能评测四.物理 ...
javaweb学习总结(二十一)：JavaWeb的两种开发模式
SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. 一.JSP+JavaBean开发模式 1 ...
java开发平台普元_java开发平台的两种实现模式
从目前国内主流的java开发平台看,主要有两种实现模式:引擎模式及生成源代码模式.引擎模式比较有代表性的是华丹平台(https://www.huadaninfo.com),生成源代码模式比较有名是的普 ...

webpack 安装vue（两种代码模式compiler 和runtime）

webpack 安装vue（两种代码模式compiler 和runtime）相关推荐

最新文章

热门文章