在 Vue 项目初始化时遇到了这样的问题:
[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
模式,默认为 runtime
模式,Vue 模块则指向 dist/vue.runtime.common.js
位置。
观察我的 main.js 代码,是这样的的,跟之前的写法大为不同:
/_ eslint-disable no-new _/;
new Vue({
el: "#app",
router,
created() {},
components: {
App
},
template: "<App/>"
});
这种形式是 compiler
模式,因此就会出现上面的错误。
解决办法
- 直接修改 main.js 代码
//runtime
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
在 Vue cli 2.0
中没有出现这个为,是因为 2.0 中 有 webpack
的别名配置如下:
resolve:{
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
}
也就是说, import Vue from 'vue'
这行代码被解析为 import Vue from 'vue/dist/vue.esm.js'
, 因此直接指定了文件的位置,而没有使用 main
字段默认的文件位置。
针对上面问题,也可以直接在 main.js
中修改引用 vue
的代码:
import Vue from "vue/dist/vue.esm.js";
- 修改
webpack
配置
在 Vue cli 3.0 中需要在 vue.config.js
文件里加上 webpack
的配置,具体代码如下:
configureWebpack: {
resolve: {
alias: {
'vue\$': 'vue/dist/vue.esm.js'
}
}