問題描述：
image.png
原因分析：
在項目配置的時候耘纱，默認 npm 包導出的是運行時構建，即 runtime 版本利赋，不支持編譯 template 模板郁惜。
vue 在初始化項目配置的時候堡距，有兩個運行環(huán)境配置的版本：Compiler 版本、Runtime 版本兆蕉。其主要區(qū)別在于：
- Compiler 版本：
可以對 template 模板內容進行編譯（包括字符串模板和可以綁定的 html 對象作為模板）羽戒，例如：
new Vue({
el: "#box",
template: "<div>{{msg}}</div>",
data: {
msg: "hello"
}
});
- Runtime 版本：
使用 vue-loader 加載.vue 文件（組件文件）時，webpack 在打包過程中對模板進行了渲染虎韵。
解決方法
修改配置文件中的 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 這個文件已經(jīng)將 vue/dist.package.json 的錯誤引用糾正成 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
修改項目根目錄中的配置文件：vue.config.js驶社，具體代碼如下：
修改 vue_cli3.0 的配置文件企量，添加 配置文件：vue.config.js 在項目的根目錄下,目的是修改在引入 vue 時，不要采用 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")
}
};
}
// ...
};
- 【劃重點】
發(fā)現(xiàn)了一個新的方法亡电，只需要添加一行代碼的配置届巩，即可實現(xiàn)支持template編譯：
// vue.config.js
module.exports = {
runtimeCompiler: true,
}
原文鏈接：https://blog.csdn.net/xiaomajia029/article/details/88320233
