關於 vue-cli v2.8.2

我在撰寫《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有興趣的童鞋我推薦能夠看看下面的這幾篇文章：

• 【Service Worker】生命週期那些事兒
• 【Service Worker】消息推送功能「全軍覆沒」
• service worker初探：超級攔截器與預緩存

2 在 static 靜態資源文件夾內多了一個 manifest.json 文件用做移動端瀏覽器識別此網站的一些基本Meta信息之用。

3 index.html 這個文件有很是巨大的差別PWA模板對index.html入口頁面的meta標記作了很是豐富的補充定義，其目的主要是針對各類不一樣移動設備在訪問咱們開發的Vue項目時能具備更好的兼容性。另外它增長了一堆的腳本，這個腳本主要是在頁面的load事件中伺候前文說到的 Service worker 配置之用的。

而後就沒有而後了，PWA模板基本上就是作出了一點點的修改沒有給咱們太多的驚喜。實際使用起來對於沒有采用CDN的或者CDN預算緊巴巴的童鞋PWA確實也是個不錯的選擇。