首先需要修改一下配置文件再打包，很多人都是遇到過打包后運(yùn)行一片空白等等問題，這些問題主要就是路徑的問題，所以需要修改config下面的index.js這個配置文件里選項：(在build下)
上圖中第一個要修改的就是靜態(tài)文件的路徑，打包后靜態(tài)文件就在當(dāng)前目錄下，所以修改為./
第二個是環(huán)境設(shè)置為生產(chǎn)環(huán)境
常見問題：css中引用的圖片資源找不到
我的login.vue文件中有一段css，其中引用了一個背景圖片，是這樣寫的
1.login{height:100%;background:?url("../assets/login_bg.jpg")?no-repeat; background-size: cover;color:?white;}
“src/assets/”文件夾下有這張圖片，打包后路徑發(fā)生變化這個圖片就找不到了，stackflow上有一個解決辦法，很簡單
打開“build/utils.js”，增加一行代碼即可
路由配置
在router\index.js文件中配置路由
let baseUrl =''
const isDev =process.env.NODE_ENV ==='production'
if (isDev ===true){
? baseUrl ='/dist'
}
export default new Router({
base:baseUrl,
scrollBehavior: () => ({ y: 0}),
routes:constantRouterMap
})
在服務(wù)器上有些圖片顯示不出來？報錯找不到?
這是因為在模塊加載器的url加載器limt限制大小的關(guān)系?
改成：limit：90000 就可以了 然后重新打包
在服務(wù)器上直接刷新網(wǎng)頁，然后就找不到網(wǎng)頁了。。。？?
這是因為路由模式我們選擇了 html5的 mode模式，去掉mode模式重新打包就可以了
優(yōu)化步驟
回到webpack.prod.conf.js文件中，vue-cli腳手架對基礎(chǔ)部分的webpack配置做了統(tǒng)一的提取，寫在webpack.base.conf.js里面。
定義絕對路徑
在webpack.base.conf.js文件中，我們可以在resolve中對項目的絕對路徑進(jìn)行定義，畢竟相對路徑在js中，我認(rèn)為是毒瘤...
resolve: {extensions: ['.js','.vue','.json'],? ? alias: {'@':resolve('src'),'components':resolve('src/components'),'common':resolve('src/common')? ? }},
大的依賴?yán)胏dn引入
在webpack.base.conf.js文件中，對較大的文件在index.html中直接引入cdn地址，然后在可以在externals中在項目進(jìn)行定義
// index.html
然后在externals中定義供項目直接使用
externals: {"echarts":"echarts"}
externals中的key是給import的時候用的，value表示的是如何在global中訪問到該對象，這里是window.echarts，在項目中可以直接使用，利用cdn優(yōu)勢的同時，避免webpack打包文件過大。
關(guān)掉productionSourceMap
在config目錄下面的index.js文件中，vue-cli腳手架對開發(fā)環(huán)境和生產(chǎn)環(huán)境都做了相關(guān)配置，其中在build配置下設(shè)置productionSourceMap為false，避免產(chǎn)出.map后綴結(jié)尾的js文件，（除非需要線上調(diào)試）
開啟gzip
同樣在config目錄下面的index.js文件中，開啟productionGzip，可以產(chǎn)出.gz后綴結(jié)尾的js文件，個人印象中將近減少了2/3的打包代碼體積。瀏覽器會優(yōu)先加載.gz后綴結(jié)尾的文件，如果瀏覽器不能識別，再加載正常的文件，當(dāng)然后臺nginx部署的時候也是可以實現(xiàn)gzip壓縮功能。需要值得注意的是，開啟productionGzip后，需要安裝一個webpack插件進(jìn)行配合
npm install compression-webpack-plugin -D
這點(diǎn)可以在webpack.prod.conf.js里面悉知。
打包好后可以自己測試運(yùn)行是否正常
這個時候需要利用node中的express,方法如下:
安裝express: npm install -g express;
最新express4.0版本中將命令工具分家出來了,還需要安裝一個命令工具: npm install -g express-generator;
創(chuàng)建一個express工程: express helloworld;
進(jìn)入項目主目錄: cd helloworld;
安裝必備包: npm install;
啟動程序: npm start;
把打包后的dist文件夾放在public文件夾里,訪問http://localhost:3000/dist就能看到項目了,這樣測試好了后,就可以丟后臺了
