最新vue-cli 2.9.1的webpack存在問題

sghuangrihuang發表於2019-02-27

最近vue-cli更新,用其構建專案的時候,發現bulid檔案下少了兩個檔案,分別是dev-sever.js和dev-client.js
vue-cli 2.8

vue-cli 2.9.1

這是為什麼呢
我們檢視下package.json
vue-cli 2.8

vue-cli 2.9.1

由此可知 在最新版本的vue-cli中webpack版本更新到v3.6.0了。

既然更新了 那就我們就重新開下webpack的配置項。

vue自啟瀏覽器設定

當我們啟動npm run dev執行此cli的時候發現 居然不會自己啟動瀏覽器了

這樣的話 豈不是裝逼不了? 不不不 還是可以的,只要我們修改下配置項就可以了

我們先看看 我們npm run dev 到底執行了什麼
繼續檢視package.json的scripts選項的dev 配置

vue-cli 2.9.1 package.json

對比下就知道 當我們執行npm run dev 實際上是執行了webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
vue-cli 2.8 package.json

跟之前執行npm run dev 有區別 也好說明了他要刪除這兩個檔案的原因了,因為最新版本的webpack的配置中是採用webpack-dev-server這個外掛進行的啟動瀏覽器的 可以在官網進行檢視他的一個API使用說明

build/webpack.dev.conf.js 執行路徑 那檢視下其配置

vue-cli 2.9.1 build/webpack.dev.conf.js

檢視API就知道這個open 這個引數就是開啟自啟伺服器的原因,但是config.dev.autoOpenBrowser這個是什麼呢,我們可以向上查詢

剛好對應config的定義 require就是載入進來 那就是繼續檢視對應的路徑 剛好對應config檔案下的index.js 在require預設是其下的index檔案 這裡就對應index.js

config/index.js

這裡的autoOpenBrowser對應false ,既然我們要改動那就直接改為true就可以。然後在重啟下服務 就可以自啟動服務了

其中的port也可以改對應的啟動埠,在最新版本的vue-cli配置中 即使設定的埠被佔用了,他自動會在其埠在加1 開啟服務的。


餓了嗎APP 介面設定問題

由於bulid資料夾下的兩個檔案沒有,那餓了嗎介面怎麼設定呢。

在此之前我們理解下餓了嗎app的介面的設定原理,由於資料都是直接從data.json這個檔案獲取的,所以呢,我們要模擬mock做個介面。但是在餓了嗎APP的設定中 它是直接啟動服務的時候把介面給做好了,這也是為什麼我們可以直接訪問其/api/seller有對應資料
vue-cli 2.9.1

在vue-cli 2.9.1之前版本是在dev-server.js直接設定的 具體引數在
vue-cli 2.9.1

方法一:

回到起點,在最新版本vue-cli的配置中瀏覽器服務都在webpack-dev-server 這個外掛中,那我們就其在webpack.dev.conf.js進行修改
現在我們的要求就是怎麼在服務開啟的時候介面資料也對應做好呢,那我們檢視其外掛API 剛好有一個引數就是devServer.before
devServer.before

就是解決問題所在了。 進行修改
webpack.dev.conf.js

這樣我們就可以直接傳送API請求資料了

this.axios.get("/api/seller").then(function(res){
  // do something
})複製程式碼

方法二

會node的也可以直接做個api介面,開啟node服務 然後餓了嗎專案直接訪問這個介面,當然這裡會存在跨域問題和路由對映,不過webpack-dev-server 幫你們解決這個問題了 主要是設定引數問題 devServer.proxy 進行路由對映等等

不過這些還需要考慮到自身能力,我建議還是使用第一種方法

總結

前端技術更新那麼快,我們最好就是每天都要學習想對應的知識,主要是底層能理解透徹了 這些問題我們就可以對應解決

雖然我的能力有限,目前能解決的也就這些問題,畢竟是第一次發表文章,如果存在什麼技術問題可以直接回復我,謝謝了。複製程式碼

相關文章