基於vue腳手架的項目打包上線（發佈）方法和誤區

最近要把vue腳手架開發的一個項目上線，只知道vue腳手架是基於node的服務端項目，那麼只須要 npm run dev 就能夠輕鬆啓動整個項目，當我想固然的給服務器配置合適的node環境（這裏也遇到了坑，服務器系統對node版本的兼容性等），而後想固然的把整個項目源文件拷貝到服務器上，滿心歡喜地去線上測試~~

悲劇發生了，停在啓動頁（首頁）遲遲沒有反應。我嘞個去，一看network請求，app.js這個被webpack打包的引用依賴文件足足14.7M，個人天，我用的測試服務器只有1M的帶寬，也就是說客戶機網絡足夠快，再忽略掉傳輸損耗等因素，這個頁面也得加載十幾秒（理想狀態下）。實際的狀況是一兩分鐘以後app.js才能加載完成，開始首頁渲染。這確定是不能接受的狀況。

怎麼解決呢？個人踩坑過程是這樣的（若是是一步到位看最終解決方案，請跳過，直接看最後一部分）

1.找尋webpack打包app.js的原理和優化方案，沒想到網上遇到這種狀況的還挺多，

因而乎，就按照上面的方案去作，把vue\vue-resouce、vue-router等取消本地依賴打包，換成靜態資源外鏈的形式，固然也用了路由懶加載，app.js日新月異縮小到了8M,可是仍是不行啊，加載時間仍是1min左右。當時的目標是能縮減到2M左右，這樣做爲開發者的我還算能接受，用戶能不能接受我就不知道了。哈哈哈。

項目中用到了echart和v-chart這兩個東西比較大。感受確定吃掉了我很大的空間，預示就想把他們外鏈出去，想法是對的，可是v-charts的外鏈依然碰壁連連。確實這樣作貌似也看到了曙光，app.js能夠縮小到3M，可是v-charts在項目中不起做用了，因此說我可能看到的只是假象。

2.基於前面的嘗試，讓我以爲應該寄但願於webpack打包機制，因而乎作好了啃新的準備，看了一上午，把代碼優化到7M左右，效果不明顯啊！

我甚至以爲我以前的依賴有多餘的吧，要不要精簡一下，可是很差下手，刪一個就報錯。準備重構項目了！又去安裝了腳手架的3.0版，哎，3.0.和2.0仍是差異蠻大的，也是一鼻子灰。

而後就是最後的解決方法了，其實就是一個誤區啦！！（稍後更新）

3.誤區解讀：其實vue腳手架自己就提供兩種模式 開發模式&生產模式  也就是npm run dev&npm run build；咱們發佈版本上線的時候是要用生產模式，打包以後的文件目錄格式是這樣的：

生成dist文件夾就是你能夠直接放到服務器上的文件，其中包括了靜態資源文件，還有那些依賴文件都已經打包進index.html而且進行了壓縮。

值得注意的是當你用build打包的時候有個地方的配置須要改一下：看下圖

這兩個地方以前是本來靜態資源的相對路徑，由於打包完以後index和static文件夾在同一目錄下，因此改爲當前路徑。

一直以來的誤區就是腳手架必須依賴與node環境，實際否則，只是開發模式，發佈以後就是普通的html,能夠跑在以前的服務器下。

這樣一來，你會發現app.js和vendor.js都不過幾百K的大小，通常超不過1M，運行速度大大提升。

上面說到的vue腳手架其實不許確，應該是基於vue腳手架和elementui的開源後臺管理項目vueAdmin!（並不是原生的vue腳手架，不過除了啓動命令沒太大區別，原生命令看這裏）在GitHub 上有源碼。