我在撰寫(xiě)《Vue2實(shí)踐揭秘》時(shí)采用的 vue-cli 版本是 v2.5.1耀找，由于實(shí)體書(shū)的出版周期比電子書(shū)的要長(zhǎng)，所以到全書(shū)出版vue-cli已經(jīng)更新到 v2.8.2 了扑馁，我在書(shū)中曾經(jīng)對(duì) vue-cli 的全部官方模板進(jìn)行過(guò)一個(gè)全面的解釋涯呻，今天看了到這個(gè)更新版本算一算日子也已經(jīng)與我寫(xiě)書(shū)時(shí)相距接近半年了，所以也特意重新來(lái)對(duì)每個(gè)模板過(guò)了一遍腻要，作為對(duì)《Vue2實(shí)踐揭秘》的補(bǔ)充更新吧复罐。
先來(lái)看看有啥不同:
由于Webpack進(jìn)行了一次很大的升級(jí)，所以可能在2.8之前的一些vue項(xiàng)目會(huì)導(dǎo)致不能運(yùn)行雄家，這是由于webpack這次的升級(jí)實(shí)在太過(guò)于惡心效诅，竟然直接修改配置項(xiàng)的名稱，最不可以理喻的是為強(qiáng)制loader引用要加入loader的名稱后綴趟济，實(shí)在是影響生產(chǎn)力的一次升級(jí)乱投。
官方Webpack模板的內(nèi)容也沒(méi)啥新的變化，具體的內(nèi)容我在《Vue2實(shí)踐揭秘》中已經(jīng)列出顷编。新版本的可能只是存一些小小的細(xì)微不同戚炫，這并不會(huì)很重要，因?yàn)榭傮w的思路并沒(méi)有什么本質(zhì)上的變化媳纬，新的變更使用新版本的方式就好了双肤。
在 vue-cli v2.8.2 中多了一個(gè)叫 PWA 的全新模板。按照這里的解釋這是一個(gè)基于vue-cli 的 webpack 模板,(漸進(jìn)式網(wǎng)頁(yè)應(yīng)用)钮惠。
運(yùn)行init指令來(lái)建立一個(gè)新的Vue項(xiàng)目：
$ vue init pwa vue-pwa
驚喜地發(fā)現(xiàn)PWA在初始化時(shí)多了一項(xiàng)詢問(wèn)是否安裝vue-router 茅糜，這確實(shí)是一個(gè)不錯(cuò)的更新，畢竟vue-router太常用了素挽。
PWA 是 Google 推崇的一種Web的開(kāi)發(fā)規(guī)則蔑赘，也就是 Progressive Web Apps 中文翻譯過(guò)來(lái)是 漸進(jìn)式網(wǎng)頁(yè)應(yīng)用，我個(gè)人覺(jué)得這個(gè)概念有點(diǎn)白癡预明，只要有程序繼續(xù)被維護(hù)做增量式的改善那不就是這個(gè)所謂的PWA的概念了嘛缩赛，并不是啥新東東。只要細(xì)細(xì)地看上述的網(wǎng)頁(yè)鏈接其實(shí)就是google給出了一個(gè)完整的checklist建議如何開(kāi)發(fā)一個(gè)“規(guī)范”的"App"撰糠。
回到這個(gè) PWA 模板峦筒，我曾將與 Webpack 模板之間的所有文件一個(gè)一個(gè)地對(duì)比過(guò)，以下是它們之間的一些差異：
1 在 build/webpack.prod.conf.js 中的第99行開(kāi)始的多了這么一個(gè)配置:
// service worker caching
new SWPrecacheWebpackPlugin({
cacheId: 'my-vue-app',
filename: 'service-worker.js',
staticFileGlobs: ['dist/**/*.{js,html,css}'],
minify: true,
stripPrefix: 'dist/'
})
這時(shí)可以打開(kāi)package.json 就可以發(fā)現(xiàn)在devDependencies配置內(nèi)多了一個(gè) sw-precache-webpack-plugin 依賴包窗慎，上面這個(gè)配置就是為了配這個(gè)包而存在的。
sw-precache-webpack-plugin 這個(gè)插件其實(shí)就是利用Chrome的緩存功能對(duì)靜態(tài)資源進(jìn)行強(qiáng)制緩存，這也不是啥新的功能這是好幾年前Chrome在力推HTML5時(shí)推出Offline功能時(shí)就內(nèi)嵌到瀏覽器內(nèi)的一項(xiàng)目功能遮斥。對(duì)于這東東實(shí)在沒(méi)啥好說(shuō)的峦失，平時(shí)構(gòu)建Vue項(xiàng)目時(shí)用它就好了，如果是做內(nèi)部項(xiàng)目之用的話它基本上不會(huì)發(fā)揮出多大效果术吗，如果對(duì)SW有興趣的童鞋我推薦可以看看下面的這幾篇文章：
2 在 static 靜態(tài)資源文件夾內(nèi)多了一個(gè) manifest.json 文件用作移動(dòng)端瀏覽器識(shí)別此網(wǎng)站的一些基本Meta信息之用尉辑。
3 index.html 這個(gè)文件有非常巨大的差異PWA模板對(duì)index.html入口頁(yè)面的meta標(biāo)記做了非常豐富的補(bǔ)充定義，其目的主要是針對(duì)各種不同移動(dòng)設(shè)備在訪問(wèn)我們開(kāi)發(fā)的Vue項(xiàng)目時(shí)能具有更好的兼容性。另外它增加了一堆的腳本，這個(gè)腳本主要是在頁(yè)面的load事件中伺候前文說(shuō)到的 Service worker 配置之用的迁央。
然后就沒(méi)有然后了两嘴，PWA模板基本上就是做出了一點(diǎn)點(diǎn)的修改沒(méi)有給我們太多的驚喜。實(shí)際使用起來(lái)對(duì)于沒(méi)有采用CDN的或者CDN預(yù)算緊巴巴的童鞋PWA確實(shí)也是個(gè)不錯(cuò)的選擇烤送。
