vue-cli 2.9.1中webpack存在問題的示例分析

這篇文章主要為大家展示了“vue-cli 2.9.1中webpack存在問題的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“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 進行路由映射等等

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

以上是“vue-cli 2.9.1中webpack存在問題的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！