在 Vue 項(xiàng)目初始化時(shí)遇到了這樣的問題：
[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 模式，默認(rèn)為 runtime 模式，Vue 模塊則指向 dist/vue.runtime.common.js 位置亚侠。
觀察我的 main.js 代碼下翎，是這樣的的，跟之前的寫法大為不同：
/_ eslint-disable no-new _/;
new Vue({
el: "#app",
router,
created() {},
components: {
App
},
template: "<App/>"
});
這種形式是 compiler 模式倒脓，因此就會(huì)出現(xiàn)上面的錯(cuò)誤拄踪。
解決辦法
- 直接修改 main.js 代碼
//runtime
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
在 Vue cli 2.0 中沒有出現(xiàn)這個(gè)為，是因?yàn)?2.0 中 有 webpack 的別名配置如下：
resolve:{
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
}
也就是說撵儿， import Vue from 'vue' 這行代碼被解析為 import Vue from 'vue/dist/vue.esm.js' , 因此直接指定了文件的位置乘客，而沒有使用 main 字段默認(rèn)的文件位置。
針對(duì)上面問題淀歇，也可以直接在 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'
}
}
