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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步