在最初用vue+webpack+vue-router做項目的時候，在本地pc開發測試都是正常的，但是在把代碼打包部署到測試服務器之后，訪問項目首頁總是白屏。
第一種，打包后的dist目錄下的文件引用路徑不對，會因找不到文件而報錯導致白屏。
解決辦法：修改一下config下面的index.js中bulid模塊導出的路徑。因為index.html里邊的內容都是通過script標簽引入的，而你的路徑不對，打開肯定是空白的。先看一下默認的路徑。
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true
assetsPublicPath默認的是 ‘/’ 也就是根目錄。而我們的index.html和static在同一級目錄下面。 所以要改為 ‘./ ’;
再次執行 npm run build 就可以了。
第二種：由於把路由模式mode設置成history了，默認是hash。
解決方法：路由里邊router/index.js路由配置里邊默認模式是hash，如果你改成了history模式的話，打開也會是一片空白。所以改為hash或者直接把模式配置刪除，讓它默認的就行 。如果非要使用history模式的話，需要你在服務端加一個覆蓋所有的情況的候選資源：如果URL匹配不到任何靜態資源，則應該返回一個index.html,這個頁面就是你app依賴頁面。
所以只要刪除mode或者把mode改成hash就OK了。
第三種：在項目中使用了es6的語法，一些瀏覽器不支持es6，造成編譯錯誤不能解析而造成白屏
解決方法：
1. 安裝 npm install --save-dev babel-preset-es2015
2. 安裝 npm install --save-dev babel-preset-stage-3
3. 在項目根目錄創建一個.babelrc文件 里面內容 最基本配置是：
{
// 此項指明，轉碼的規則
"presets": [
// env項是借助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉碼，並且設置amd,commonjs這樣的模塊化文件，不進行轉碼
["env", { "modules": false }],
// 下面這個是不同階段出現的es語法，包含不同的轉碼插件
"stage-2"
],
// 下面這個選項是引用插件來處理代碼的轉換，transform-runtime用來處理全局函數和優化babel編譯
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中，不產生注釋
"comments": false,
// 下面這段是在特定的環境中所執行的轉碼規則，當環境變量是下面的test就會覆蓋上面的設置
"env": {
// test 是提前設置的環境變量，如果沒有設置BABEL_ENV則使用NODE_ENV，如果都沒有設置默認就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一個用來測試轉碼后代碼的工具
"plugins": ["istanbul"]
}
}
}
然后重啟npm run dev 你會發現，可以在其他低版本瀏覽器跑了，基本兼容所有瀏覽器，ie8以下除外。而且大多數的手機瀏覽器也ok。重新打包到正式環境也正常。
至此所有與vue相關的產品的白屏的原因，總結完畢！