vue-cli 2.9.1的webpack有問題詳解-js教程-PHP中文網

vue-cli 2.9.1的webpack有問題詳解

小云云

發布： 2017-12-18 09:13:59

原創

1721 人瀏覽過

最近vue-cli更新，用其建置專案的時候，發現bulid檔下少了兩個文件，分別是dev-sever.js和dev-client.js 本文主要介紹了最新vue-cli 2.9.1的webpack存在問題，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

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 進行路由映射等等

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

總結

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