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')}},}}