最近vue-cli更新，用其構(gòu)建項(xiàng)目的時(shí)候，發(fā)現(xiàn)bulid文件下少了兩個(gè)文件，分別是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了。

既然更新了 那就我們就重新開(kāi)下webpack的配置項(xiàng)。

vue自啟瀏覽器設(shè)置

當(dāng)我們啟動(dòng)npm run dev執(zhí)行此cli的時(shí)候發(fā)現(xiàn) 居然不會(huì)自己?jiǎn)?dòng)瀏覽器了

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

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

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

vue-cli 2.9.1 package.json

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

vue-cli 2.8 package.json

跟之前運(yùn)行npm run dev 有區(qū)別 也好說(shuō)明了他要?jiǎng)h除這兩個(gè)文件的原因了，因?yàn)樽钚掳姹镜膚ebpack的配置中是采用webpack-dev-server這個(gè)插件進(jìn)行的啟動(dòng)瀏覽器的 可以在官網(wǎng)進(jìn)行查看他的一個(gè)API使用說(shuō)明

build/webpack.dev.conf.js 運(yùn)行路徑 那查看下其配置

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

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

剛好對(duì)應(yīng)config的定義 require就是加載進(jìn)來(lái) 那就是繼續(xù)查看對(duì)應(yīng)的路徑 剛好對(duì)應(yīng)config文件下的index.js 在require默認(rèn)是其下的index文件 這里就對(duì)應(yīng)index.js

config/index.js

這里的autoOpenBrowser對(duì)應(yīng)false ,既然我們要改動(dòng)那就直接改為true就可以。然后在重啟下服務(wù) 就可以自啟動(dòng)服務(wù)了

其中的port也可以改對(duì)應(yīng)的啟動(dòng)端口，在最新版本的vue-cli配置中 即使設(shè)置的端口被占用了，他自動(dòng)會(huì)在其端口在加1 開(kāi)啟服務(wù)的。

餓了嗎APP 接口設(shè)置問(wèn)題

由于bulid文件夾下的兩個(gè)文件沒(méi)有，那餓了嗎接口怎么設(shè)置呢。

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

vue-cli 2.9.1

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

vue-cli 2.9.1

方法一：

回到起點(diǎn)，在最新版本vue-cli的配置中瀏覽器服務(wù)都在webpack-dev-server 這個(gè)插件中，那我們就其在webpack.dev.conf.js進(jìn)行修改

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

devServer.before

就是解決問(wèn)題所在了。 進(jìn)行修改

webpack.dev.conf.js

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

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

方法二

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

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

總結(jié)

前端技術(shù)更新那么快，我們最好就是每天都要學(xué)習(xí)想對(duì)應(yīng)的知識(shí)，主要是底層能理解透徹了 這些問(wèn)題我們就可以對(duì)應(yīng)解決

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論