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

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

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

總結

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

雖然個人能力有限，目前能解決的也就這些問題，畢竟是第一次發表文章，若是存在什麼技術問題能夠直接回復我，謝謝了。複製代碼