在升级脚手架到vue-cli3.0版本的时候出现了这个报错：
[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模式的，所以就会出现上面的错误信息
// 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的呀？
这也是我要说的第二种解决办法
因为之前我们的webpack配置文件里有个别名配置，具体如下
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式 vue结尾的
}
}
也就是说，import Vue from ‘vue’ 这行代码被解析为 import Vue from ‘vue/dist/vue.esm.js’，直接指定了文件的位置，没有使用main字段默认的文件位置
所以第二种解决方法就是，在vue.config.js文件里加上webpack的如下配置即可，
configureWebpack: {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
既然到了这里我想很多人也会想到第三中解决方法，那就是在引用vue时，直接写成如下即可
import Vue from 'vue/dist/vue.esm.js'
总结
遇到问题之后不是说解决了问题就完事了，更重要的是要思考 – 为什么？，原因是啥？要理解而不是死记，只有这样你才能得到很大的提升！
原因分析：
在项目配置的时候，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。
vue 在初始化项目配置的时候，有两个运行环境配置的版本：Compiler 版本、Runtime 版本。
其主要区别在于：
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 这个文件已经将 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")
}
};
}
// ...
};
【划重点】
发现了一个新的方法，只需要添加一行代码的配置，即可实现支持template编译：
// vue.config.js
module.exports = {
runtimeCompiler: true,
}
