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模式报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue项目预览excel表格功能(file-viewer插件)
这篇文章主要介绍了vue项目预览excel表格功能(file-viewer插件),本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
vue+elementUI-el-table实现动态显示隐藏列方式
这篇文章主要介绍了vue+elementUI-el-table实现动态显示隐藏列方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了Vue Router路由无法跳转问题汇总,在这里我整理了部分Vue Router路由无法跳转问题,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue项目实现github在线预览功能，本文通过提问两个问题带领大家一起学习整个过程,需要的朋友可以参考下2018-06-06
vue3+vite使用History路由模式打包部署项目的步骤及注意事项
这篇文章主要介绍了vue3+vite使用History路由模式打包部署项目的步骤及注意事项,配置过程包括在Vue项目中设置路由模式、调整打包配置以及Nginx服务器的配置,正确的部署配置能够确保应用顺利运行,提升用户体验,需要的朋友可以参考下2024-10-10
本文主要介绍了vue3清空reactive的四种方式,包含使用 Object.assign,使用 Object.keys 和 for...in 循环,使用 delete 操作符和重新赋值4种,感兴趣的可以了解一下2024-03-03
使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例
这篇文章主要给大家介绍了关于使用vue3+ts+setup获取全局变量getCurrentInstance的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2022-08-08
如何解决d3.event在v7版本无效影响zoom拖拽缩放问题
这篇文章主要介绍了如何解决d3.event在v7版本无效影响zoom拖拽缩放问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
今天小编就为大家分享一篇vue2.0$nextTick监听数据渲染完成之后的回调函数方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家学习介绍了Vue3如何使用echarts实现绘制折线图,文中有详细的示例代码供大家参考,感兴趣的小伙伴可以跟随小编一起学习一下2023-07-07
最新评论