vue-cli2.9.1中webpack存在問題的示例分析-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“vue-cli 2.9.1中webpack存在問題的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue-cli 2.9.1中webpack存在問題的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設公司。公司專注于為企業(yè)提供信息化建設解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設計，網(wǎng)站模板，微信公眾號開發(fā)，軟件開發(fā)，微信小程序，10多年建站對成都軟裝設計等多個領域，擁有豐富的營銷推廣經(jīng)驗。

最近vue-cli更新，用其構建項目的時候，發(fā)現(xiàn)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執(zhí)行此cli的時候發(fā)現(xiàn) 居然不會自己啟動瀏覽器了

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

我們先看看 我們npm run dev 到底執(zhí)行了什么

繼續(xù)查看package.json的scripts選項的dev 配置

vue-cli 2.9.1 package.json

對比下就知道 當我們運行npm run dev 實際上是執(zhí)行了webpack-dev-server –inline –progress –config build/webpack.dev.conf.js

vue-cli 2.8 package.json

跟之前運行npm run dev 有區(qū)別 也好說明了他要刪除這兩個文件的原因了，因為最新版本的webpack的配置中是采用webpack-dev-server這個插件進行的啟動瀏覽器的 可以在官網(wǎng)進行查看他的一個API使用說明

build/webpack.dev.conf.js 運行路徑 那查看下其配置

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

查看API就知道這個open 這個參數(shù)就是打開自啟服務器的原因，但是config.dev.autoOpenBrowser這個是什么呢，我們可以向上查找

剛好對應config的定義 require就是加載進來 那就是繼續(xù)查看對應的路徑 剛好對應config文件下的index.js 在require默認是其下的index文件 這里就對應index.js

config/index.js

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

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

餓了嗎APP 接口設置問題

由于bulid文件夾下的兩個文件沒有，那餓了嗎接口怎么設置呢。

在此之前我們理解下餓了嗎app的接口的設置原理，由于數(shù)據(jù)都是直接從data.json這個文件獲取的，所以呢，我們要模擬mock做個接口。但是在餓了嗎APP的設置中 它是直接啟動服務的時候把接口給做好了，這也是為什么我們可以直接訪問其/api/seller有對應數(shù)據(jù)

vue-cli 2.9.1

在vue-cli 2.9.1之前版本是在dev-server.js直接設置的 具體參數(shù)在

vue-cli 2.9.1

方法一：

回到起點，在最新版本vue-cli的配置中瀏覽器服務都在webpack-dev-server 這個插件中，那我們就其在webpack.dev.conf.js進行修改

現(xiàn)在我們的要求就是怎么在服務開啟的時候接口數(shù)據(jù)也對應做好呢，那我們查看其插件API 剛好有一個參數(shù)就是devServer.before

devServer.before

就是解決問題所在了。 進行修改

webpack.dev.conf.js

這樣我們就可以直接發(fā)送API請求數(shù)據(jù)了

this.axios.get("/api/seller").then(function(res){
 // do something
})

方法二

會node的也可以直接做個api接口，開啟node服務 然后餓了嗎項目直接訪問這個接口，當然這里會存在跨域問題和路由映射，不過webpack-dev-server 幫你們解決這個問題了 主要是設置參數(shù)問題 devServer.proxy 進行路由映射等等

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

以上是“vue-cli 2.9.1中webpack存在問題的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站標題：vue-cli2.9.1中webpack存在問題的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://muchs.cn/article38/eijsp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站導航、網(wǎng)站營銷、企業(yè)建站、網(wǎng)站設計公司、響應式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)