vue版本 vue2

错误描述

[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 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.

main.js代码如下

import Layout from '@/layout/index'new Vue({el: '#app',router,store,// render: h => h(App),//vue 模版编译开启components: { Layout },template: '<Layout/>'
})

原因

vue有两种形式的代码 compiler（模板）模式和 runtime （运行时）模式，vue模块的package.json的main字段默认为runtime模式， 指向了"dist/vue.runtime.common.js"位置。
在我的main.js文件中，初始化vue使用的是compiler模式，所以出现上面的错误信息。

解决办法

1、main.js初始化vue改为runtime模式

new Vue({el: '#app',router,store,render: h => h(App),
})

2、修改vue.config.js配置

增加 runtimeCompiler: true,
runtimeCompiler：是否使用包含运行时编译器的 Vue 构建版本。默认值false，设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。

webpack配置文件里增加 ‘vue$’: ‘vue/dist/vue.esm.js’,
import Vue from ‘vue’ 这行代码被解析为 import Vue from ‘vue/dist/vue.esm.js’，直接指定了文件的位置，没有使用main字段默认的文件位置。

module.exports = {runtimeCompiler: true,configureWebpack: {name: name,resolve: {alias: {'vue$': 'vue/dist/vue.esm.js', //内部为正则表达式  vue结尾的'@': resolve('src')}},}}