Vue2中compiler和runtime模式報(bào)錯(cuò)template compiler is not available
錯(cuò)誤描述
[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 （運(yùn)行時(shí)）模式，vue模塊的package.json的main字段默認(rèn)為runtime模式， 指向了"dist/vue.runtime.common.js"位置。
在我的main.js文件中，初始化vue使用的是compiler模式，所以出現(xiàn)上面的錯(cuò)誤信息。
解決辦法
1、main.js初始化vue改為runtime模式
new Vue({
el: '#app',
router,
store,
render: h => h(App),
})2、修改vue.config.js配置
增加 runtimeCompiler: true,
runtimeCompiler：是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本。默認(rèn)值false，設(shè)置為 true 后你就可以在 Vue 組件中使用 template 選項(xiàng)了，但是這會(huì)讓你的應(yīng)用額外增加 10kb 左右。
webpack配置文件里增加 ‘vue$’: ‘vue/dist/vue.esm.js’,
import Vue from ‘vue’ 這行代碼被解析為 import Vue from ‘vue/dist/vue.esm.js’，直接指定了文件的位置，沒有使用main字段默認(rèn)的文件位置。
module.exports = {
? ? runtimeCompiler: true,
? ? configureWebpack: {
? ? name: name,
? ? resolve: {
? ? ? alias: {
? ? ? ? 'vue$': 'vue/dist/vue.esm.js', //內(nèi)部為正則表達(dá)式 ?vue結(jié)尾的
? ? ? ? '@': resolve('src')
? ? ? }
? ? },
? }
}到此這篇關(guān)于Vue2中compiler和runtime模式報(bào)錯(cuò)template compiler is not available的文章就介紹到這了,更多相關(guān)Vue compiler和runtime模式報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了vuecli4配置sass與less詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
高階組件HOC在React社區(qū)是非常常見的概念,但是在Vue社區(qū)中卻是很少人使用,但其實(shí)在一些特殊的場景使用他就可以很優(yōu)雅的解決一些問題,下面就跟隨小編一起來了解下吧2025-01-01
Nuxt引入vue-persistedstate以及踩坑記錄
這篇文章主要介紹了Nuxt引入vue-persistedstate以及踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue 使用rules對(duì)表單字段進(jìn)行校驗(yàn)的步驟
這篇文章主要介紹了vue 使用rules對(duì)表單字段進(jìn)行校驗(yàn)的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
詳解vue beforeRouteEnter 異步獲取數(shù)據(jù)給實(shí)例問題
這篇文章主要介紹了vue beforeRouteEnter 異步獲取數(shù)據(jù)給實(shí)例問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue使用百度地圖報(bào)錯(cuò)BMap?is?not?defined問題及解決
這篇文章主要介紹了vue使用百度地圖報(bào)錯(cuò)BMap?is?not?defined問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
很多朋友不明白在使用vue for時(shí)為什么要key，key的作用有哪些,在文中給大家詳細(xì)介紹，需要的朋友可以參考下2019-07-07
本文主要介紹了Vue組件文檔生成工具庫的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue中有一張響應(yīng)式系統(tǒng)的流程圖，vue會(huì)將模板語法編譯成render函數(shù)，通過render函數(shù)渲染生成Virtual?dom，但是官方并沒有對(duì)模板編譯有詳細(xì)的介紹，這篇文章帶大家一起學(xué)習(xí)下vue的模板編譯2023-07-07
文章介紹了在Vue中實(shí)現(xiàn)input框只能輸入4個(gè)漢字的校驗(yàn)方法,關(guān)鍵在于使用`@blur`事件觸發(fā)校驗(yàn)方法`onIptCN`,并在方法中判斷輸入內(nèi)容是否符合要求,只有當(dāng)輸入內(nèi)容為4個(gè)漢字時(shí),新建按鈕才可點(diǎn)擊2026-01-01