關(guān)于vue編譯版本引入的問題

z2xy 發(fā)布于2019-08-23 12:01 / 2604人閱讀

摘要：改為原因是，使用屬性，需要引入帶編譯器的完整版的而如果在文件里面使用這種形式，然后使用引入，則不需要完整版的，因?yàn)槭褂脮r(shí)文件會(huì)自動(dòng)預(yù)編譯成。其實(shí)官網(wǎng)中已有明確說明對(duì)不同構(gòu)建版本的解釋其他相關(guān)文章理順個(gè)版本的區(qū)別

下班過目遇到一個(gè)錯(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.

根據(jù)錯(cuò)誤提示說明，和搜索之后得出結(jié)論：是項(xiàng)目引入的vue編譯版本不對(duì)

解決方案1

build/webpack.base.conf.js 并設(shè)置vue的alias別名，如下：

resolve: {
     alias: {
       vue: "vue/dist/vue.esm.js"
     }
    }

解決方案2

打開src/main.js修改Vue對(duì)象初始化。

new Vue({
  el: "#app",
  router,
  components: { App },
  template: ""
})

改為

new Vue({
  el: "#app",
  router,
  render: h => h(App)
})

原因是，使用 template屬性，需要引入帶編譯器的完整版的vue.esm.js

而如果在.vue文件里面使用

這種形式，然后使用import引入，則不需要完整版的vue.esm.js，因?yàn)槭褂胿ue-loader時(shí) *.vue文件會(huì)自動(dòng)預(yù)編譯成js。

其實(shí)vuejs官網(wǎng)中已有明確說明
對(duì)不同構(gòu)建版本的解釋（https://cn.vuejs.org/v2/guide...）

其他相關(guān)文章：
理順8個(gè)版本vue的區(qū)別（https://segmentfault.com/a/11...）

云服務(wù)器 GPU云服務(wù)器關(guān)于javascript的問題關(guān)于php的問題關(guān)于系統(tǒng)錯(cuò)誤的問題有關(guān)于回調(diào)的問題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97840.html

相關(guān)文章

webpack配合vue.js實(shí)現(xiàn)完整的單頁面demo

摘要：本篇文章主要是我在開發(fā)前研究了的單頁面應(yīng)用，因?yàn)樾枰玫降?，所以確保安裝了，建議官網(wǎng)安裝最新的穩(wěn)定版本。本文章只是和大家探討怎么利用配合做一個(gè)單頁面應(yīng)用，具體關(guān)于里面的內(nèi)容怎么寫并不在本篇文章的介紹范圍。本篇文章主要是我在開發(fā)前研究了webpack+vue.js的單頁面應(yīng)用，因?yàn)樾枰玫絥ode的npm，所以確保安裝了node，建議官網(wǎng)安裝最新的穩(wěn)定版本。并且在項(xiàng)目中需要加載一些np...

2450184176 2019-08-19 18:35 評(píng)論0 收藏0
Vue.js中引入圖片路徑的幾種方式

摘要：記錄總結(jié)一下的中引入圖片路徑的幾種書寫方式中靜態(tài)資源的引入機(jī)制關(guān)于靜態(tài)資源的官方文檔靜態(tài)資源可以通過兩種方式進(jìn)行處理在被導(dǎo)入或在中通過相對(duì)路徑以開頭被引用。如果是一個(gè)絕對(duì)路徑，例如，它將會(huì)被保留不變。 vue --version 3.6.3記錄總結(jié)一下的Vue中引入圖片路徑的幾種書寫方式 vue中靜態(tài)資源的引入機(jī)制 Vue.js關(guān)于靜態(tài)資源的官方文檔靜態(tài)資源可以通過兩種方式進(jìn)行處理...

adam1q84 2019-08-23 18:09 評(píng)論0 收藏0
前端通用國(guó)際化解決方案

摘要：前端通用國(guó)際化解決方案背景前端技術(shù)日新月異，技術(shù)棧繁多。接下來針對(duì)這幾塊內(nèi)容并結(jié)合日常的開發(fā)流程說明國(guó)際化的通用解決方案。文章首發(fā)于個(gè)人blog，歡迎大家關(guān)注。 DI18n 前端通用國(guó)際化解決方案背景前端技術(shù)日新月異，技術(shù)棧繁多。以前端框架來說有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等構(gòu)建工具去滿足日常的開...

lingdududu 2019-08-20 15:46 評(píng)論0 收藏0
一字一句的搞懂vue-cli之vue webpack template配置

摘要：神一樣的存在。所以呢，就利用兩天時(shí)間，參考了一些他人的文章，查閱了一些官方的配置，就在此先稍微記錄一下。這份配置解析是基于最新版本的。不過，我非常建議，先別看我的文章，自己一句一句的通讀一遍。和中的配置含義相似。 webpack--神一樣的存在。無論寫了多少次，再次相見，仍是初見。有的時(shí)候開發(fā)vue項(xiàng)目，對(duì)尤大的vue-cli感激涕零。但是，但是，但是。。。不是自己的東西，真的很不想折...

atinosun 2019-08-22 11:20 評(píng)論0 收藏0
webpack 基礎(chǔ)與項(xiàng)目?jī)?yōu)化實(shí)踐總結(jié)

摘要：前言本文基于，主要涉及基本概念基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行優(yōu)化配置。同一文件中，修改某個(gè)影響其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實(shí)際項(xiàng)目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實(shí)踐部分基于自己的項(xiàng)目進(jìn)行...

Scorpion 2019-08-23 18:15 評(píng)論0 收藏0