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 （運(yùn)行時）模式，vue模塊的package.json的main字段默認(rèn)為runtime模式， 指向了"dist/vue.runtime.common.js"位置。
在我的main.js文件中，初始化vue使用的是compiler模式，所以出現(xiàn)上面的錯誤信息。
解決辦法
1、main.js初始化vue改為runtime模式
new Vue({
el: '#app',
router,
store,
render: h => h(App),
})2、修改vue.config.js配置
增加 runtimeCompiler: true,
runtimeCompiler：是否使用包含運(yùn)行時編譯器的 Vue 構(gòu)建版本。默認(rèn)值false，設(shè)置為 true 后你就可以在 Vue 組件中使用 template 選項了，但是這會讓你的應(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模式報錯template compiler is not available的文章就介紹到這了,更多相關(guān)Vue compiler和runtime模式報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇vue.js的簡單自動求和計算實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本篇文章主要介紹了Vue鍵盤事件用法總結(jié)，詳細(xì)的介紹了各種鍵盤事件的用法，有興趣的可以了解一下2017-04-04
Vue-element-admin平臺側(cè)邊欄收縮控制問題
這篇文章主要介紹了Vue-element-admin平臺側(cè)邊欄收縮控制問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue+django實(shí)現(xiàn)一對一聊天功能的實(shí)例代碼
這篇文章主要介紹了vue+django實(shí)現(xiàn)一對一聊天功能,主要是通過websocket，由于Django不支持websocket，所以我使用了django-channels。，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue-cli2打包前和打包后的css前綴不一致的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Element PageHeader頁頭的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了Vue如何獲取數(shù)據(jù)列表展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
圖文詳解Element-UI中自定義修改el-table樣式
elementUI提供的組件間距、樣式都比較大,如果直接套用,在頁面顯示可能就會顯得很大,就比如表格,表頭、行寬如果不修改的話,遇到列較多的時候,會顯得整個頁面就不好看,下面這篇文章主要給大家介紹了關(guān)于Element-UI中自定義修改el-table樣式的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue關(guān)于下載文件常用的幾種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡易記事本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11