在升級(jí)腳手架到vue-cli3.0版本的時(shí)候出現(xiàn)了這個(gè)報(bào)錯(cuò)：
[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.
我在這里大概說一下出現(xiàn)這個(gè)報(bào)錯(cuò)的原因在哪里和解決辦法
原因
vue有兩種形式的代碼 compiler（模板）模式和runtime模式（運(yùn)行時(shí)）蒿秦，vue模塊的package.json的main字段默認(rèn)為runtime模式秆乳， 指向了"dist/vue.runtime.common.js"位置暴备。
這是vue升級(jí)到2.0之后就有的特點(diǎn)苟翻。
而我的main.js文件中窥淆，初始化vue卻是這么寫的续捂，這種形式為compiler模式的钮追，所以就會(huì)出現(xiàn)上面的錯(cuò)誤信息
// 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的呀？
這也是我要說的第二種解決辦法
因?yàn)橹拔覀兊膚ebpack配置文件里有個(gè)別名配置横媚，具體如下
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' //內(nèi)部為正則表達(dá)式 vue結(jié)尾的
}
}
也就是說仿滔，import Vue from ‘vue’ 這行代碼被解析為 import Vue from ‘vue/dist/vue.esm.js’，直接指定了文件的位置郑临，沒有使用main字段默認(rèn)的文件位置
所以第二種解決方法就是，在vue.config.js文件里加上webpack的如下配置即可屑宠，
configureWebpack: {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
既然到了這里我想很多人也會(huì)想到第三中解決方法厢洞，那就是在引用vue時(shí)，直接寫成如下即可
import Vue from 'vue/dist/vue.esm.js'
總結(jié)
遇到問題之后不是說解決了問題就完事了典奉，更重要的是要思考 – 為什么躺翻？，原因是啥卫玖？要理解而不是死記公你，只有這樣你才能得到很大的提升！
原因分析：
在項(xiàng)目配置的時(shí)候假瞬，默認(rèn) npm 包導(dǎo)出的是運(yùn)行時(shí)構(gòu)建陕靠，即 runtime 版本迂尝，不支持編譯 template 模板。
vue 在初始化項(xiàng)目配置的時(shí)候剪芥，有兩個(gè)運(yùn)行環(huán)境配置的版本：Compiler 版本垄开、Runtime 版本。
其主要區(qū)別在于：
Compiler 版本：
可以對(duì) template 模板內(nèi)容進(jìn)行編譯（包括字符串模板和可以綁定的 html 對(duì)象作為模板）税肪，例如：
new Vue({
el: "#box",
template: "<div>{{msg}}</div>",
data: {
msg: "hello"
}
});
Runtime 版本：
使用 vue-loader 加載.vue 文件（組件文件）時(shí)溉躲，webpack 在打包過程中對(duì)模板進(jìn)行了渲染。
解決方法
修改配置文件中的 vue 引用
一益兄、 vue cli 2.x
找到 webpack.base.conf.js 文件锻梳，修改以下配置：
在 webpack.base.conf.js 配置文件中多加了一段代碼，將 vue/dist/ package.json 配置文件的"main": "dist/vue.runtime.common.js",改為引用代碼中的引用 vue/dist.vue.esm.js 文件偏塞，意思就是說 webpack.base.conf.js 這個(gè)文件已經(jīng)將 vue/dist.package.json 的錯(cuò)誤引用糾正成 vue/dist.vue.esm.js
// ...
const config = {
// ...
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
vue$: "vue/dist/vue.esm.js",
"@": resolve("src")
}
}
};
二唱蒸、 vue cli 3.x
修改項(xiàng)目根目錄中的配置文件：vue.config.js，具體代碼如下：
修改 vue_cli3.0 的配置文件灸叼，添加 配置文件：vue.config.js 在項(xiàng)目的根目錄下,目的是修改在引入 vue 時(shí)神汹，不要采用 runtime 形式的文件,而采用 dist/vue.esm.js 形式文件
// ...
module.exports = {
// ...
configureWebpack: config => {
config.resolve = {
extensions: [".js", ".vue", ".json", ".css"],
alias: {
vue$: "vue/dist/vue.esm.js",
"@": resolve("src")
}
};
}
// ...
};
【劃重點(diǎn)】
發(fā)現(xiàn)了一個(gè)新的方法，只需要添加一行代碼的配置古今，即可實(shí)現(xiàn)支持template編譯：
// vue.config.js
module.exports = {
runtimeCompiler: true,
}
