最近要把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 上有源碼。