關于vue編譯版本引入的問題的解決
下班過目遇到一個錯誤
[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編譯版本不對
解決方案1
build/webpack.base.conf.js 并設置vue的alias別名,如下:
resolve: {
alias: {
vue: 'vue/dist/vue.esm.js'
}
}
解決方案2
打開src/main.js修改Vue對象初始化。
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
改為
new Vue({
el: '#app',
router,
render: h => h(App)
})
原因是,使用 template屬性,需要引入帶編譯器的完整版的vue.esm.js
而如果在.vue文件里面使用
<template>
<div></div>
</template>
<script>
export default {
name:'name1',
data() {
return {};
}
};
</script>
這種形式,然后使用import引入,則不需要完整版的vue.esm.js,因為使用vue-loader時 *.vue文件會自動預編譯成js。
其實vuejs官網中已有明確說明
其他相關文章:
理順8個版本vue的區(qū)別(http://www.fzitv.net/article/147538.htm)
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
使用Vue+ElementUI動態(tài)生成面包屑導航教程
Vue和ElementUI都是非常流行的前端開發(fā)框架,它們可以讓我們更加便捷地開發(fā)前端應用,下面這篇文章主要給大家介紹了關于使用Vue+ElementUI動態(tài)生成面包屑導航的相關資料,需要的朋友可以參考下2023-05-05
html-webpack-plugin修改頁面的title的方法
這篇文章主要介紹了html-webpack-plugin修改頁面的title的方法 ,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-06-06

