我在撰寫《Vue2實踐揭秘》時采用的 vue-cli 版本是 v2.5.1，由於實體書的出版周期比電子書的要長，所以到全書出版vue-cli已經更新到 v2.8.2 了，我在書中曾經對 vue-cli 的全部官方模板進行過一個全面的解釋，今天看了到這個更新版本算一算日子也已經與我寫書時相距接近半年了，所以也特意重新來對每個模板過了一遍，作為對《Vue2實踐揭秘》的補充更新吧。
先來看看有啥不同:
由於Webpack進行了一次很大的升級，所以可能在2.8之前的一些vue項目會導致不能運行，這是由於webpack這次的升級實在太過於惡心，竟然直接修改配置項的名稱，最不可以理喻的是為強制loader引用要加入loader的名稱后綴，實在是影響生產力的一次升級。
官方Webpack模板的內容也沒啥新的變化，具體的內容我在《Vue2實踐揭秘》中已經列出。新版本的可能只是存一些小小的細微不同，這並不會很重要，因為總體的思路並沒有什么本質上的變化，新的變更使用新版本的方式就好了。
在 vue-cli v2.8.2 中多了一個叫 PWA 的全新模板。按照這里的解釋這是一個基於vue-cli 的 webpack 模板,(漸進式網頁應用)。
運行init指令來建立一個新的Vue項目：
$ vue init pwa vue-pwa
驚喜地發現PWA在初始化時多了一項詢問是否安裝vue-router ，這確實是一個不錯的更新，畢竟vue-router太常用了。
PWA 是 Google 推崇的一種Web的開發規則，也就是 Progressive Web Apps 中文翻譯過來是 漸進式網頁應用，我個人覺得這個概念有點白痴，只要有程序繼續被維護做增量式的改善那不就是這個所謂的PWA的概念了嘛，並不是啥新東東。只要細細地看上述的網頁鏈接其實就是google給出了一個完整的checklist建議如何開發一個“規范”的"App"。
回到這個 PWA 模板，我曾將與 Webpack 模板之間的所有文件一個一個地對比過，以下是它們之間的一些差異：
1 在 build/webpack.prod.conf.js 中的第99行開始的多了這么一個配置:
// service worker caching
new SWPrecacheWebpackPlugin({
cacheId: 'my-vue-app',
filename: 'service-worker.js',
staticFileGlobs: ['dist/**/*.{js,html,css}'],
minify: true,
stripPrefix: 'dist/'
})
這時可以打開package.json 就可以發現在devDependencies配置內多了一個 sw-precache-webpack-plugin 依賴包，上面這個配置就是為了配這個包而存在的。
sw-precache-webpack-plugin 這個插件其實就是利用Chrome的緩存功能對靜態資源進行強制緩存，這也不是啥新的功能這是好幾年前Chrome在力推HTML5時推出Offline功能時就內嵌到瀏覽器內的一項目功能。對於這東東實在沒啥好說的，平時構建Vue項目時用它就好了，如果是做內部項目之用的話它基本上不會發揮出多大效果，如果對SW有興趣的童鞋我推薦可以看看下面的這幾篇文章：
2 在 static 靜態資源文件夾內多了一個 manifest.json 文件用作移動端瀏覽器識別此網站的一些基本Meta信息之用。
3 index.html 這個文件有非常巨大的差異PWA模板對index.html入口頁面的meta標記做了非常豐富的補充定義，其目的主要是針對各種不同移動設備在訪問我們開發的Vue項目時能具有更好的兼容性。另外它增加了一堆的腳本，這個腳本主要是在頁面的load事件中伺候前文說到的 Service worker 配置之用的。
然后就沒有然后了，PWA模板基本上就是做出了一點點的修改沒有給我們太多的驚喜。實際使用起來對於沒有采用CDN的或者CDN預算緊巴巴的童鞋PWA確實也是個不錯的選擇。