Vue2中compiler和runtime模式报错template compiler is not available

错误描述

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

到此这篇关于Vue2中compiler和runtime模式报错template compiler is not available的文章就介绍到这了,更多相关Vue compiler和runtime模式报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！