第一種，打包后文件引用路徑不對，導致找不到文件報錯白屏
解決辦法：修改一下config下面的index.js中bulid模塊導出的路徑。因為index.html里邊的內容都是通過script標簽引入的，而你的路徑不對，打開肯定是空白的。先看一下默認的路徑。
第二種，由于把路由模式mode設置影響
解決方法：路由里邊router/index.js路由配置里邊默認模式是hash，如果你改成了history模式的話，打開也會是一片空白。所以改為hash或者直接把模式配置刪除，讓它默認的就行 。如果非要使用history模式的話，需要你在服務端加一個覆蓋所有的情況的候選資源：如果URL匹配不到任何靜態(tài)資源，則應該返回一個index.html，這個頁面就是你app依賴頁面。
所以只要刪除mode或者把mode改成hash就OK了。
第三種，項目中使用了es6的語法，一些瀏覽器不支持es6，造成編譯錯誤不能解析而造成白屏
解決方法：
- 安裝 npm install --save-dev babel-preset-es2015
- 安裝 npm install --save-dev babel-preset-stage-3
- 在項目根目錄創(chuàng)建一個.babelrc文件 里面內容 最基本配置是：
{
// 此項指明，轉碼的規(guī)則
"presets": [
// env項是借助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉碼，并且設置amd,commonjs這樣的模塊化文件，不進行轉碼
["env", {
"modules": false
}],
// 下面這個是不同階段出現(xiàn)的es語法，包含不同的轉碼插件
"stage-2"
],
// 下面這個選項是引用插件來處理代碼的轉換，transform-runtime用來處理全局函數(shù)和優(yōu)化babel編譯
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中，不產生注釋
"comments": false,
// 下面這段是在特定的環(huán)境中所執(zhí)行的轉碼規(guī)則，當環(huán)境變量是下面的test就會覆蓋上面的設置
"env": {
// test 是提前設置的環(huán)境變量，如果沒有設置BABEL_ENV則使用NODE_ENV，如果都沒有設置默認就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一個用來測試轉碼后代碼的工具
"plugins": ["istanbul"]
}
}
}
第四種，如果你的測試說你的項目在 ios 10 出現(xiàn)白屏問題
一個 bug
你用Vue做了一個單頁面應用，它在一切設備上都工作正常，但是突然有一天，你的測試和你說，這個網站在iOS 10上跑不起來，怎么辦？
項目在Safari中報一個錯誤：
SyntaxError: Cannot declare a let variable twice: 'e'.
可是你沒有寫過這樣的代碼，你怎么可能把一個名為e的變量定義兩次？打開代碼，會看到了這樣的代碼：
let e = e => {
console.log(e);
for (let e of [1, 2, 3])
console.log(e);
};
雖然這段代碼看上去比較奇怪，但是語法上有任何問題嗎？我就愿意定義一個名為e的函數(shù)，而這個函數(shù)的唯一入參名稱也為e，并且我的for循環(huán)體里還愿意再定義一個名稱為e的變量，es6的變量作用域允許我們這樣做，此e和彼e互不干擾，不對嗎？況且很顯然，這段代碼不是人寫的，而是我們在執(zhí)行npm run build的時候編譯產生的。
其實我們都沒有錯，我們也沒寫錯，uglify也沒搞錯，錯的是Safari本身。他們在第十七萬一千零四十一號bug中承認了自己的錯誤：
We incorrectly throw a syntax error when declaring a top level for-loop iteration variable the same as a parameter
當你定義一個與參數(shù)同名的for循環(huán)迭代變量時，我們錯誤地認為這是一個語法錯誤。
看，多么謙遜的態(tài)度。所以你也不用太糾結于一個白屏幕，只要找到解決方法就好了。方法其實很簡單：
1.進入build文件夾；
2.找到webpack.prod.conf.js文件；
3.在UglifyPlugin的定義里添加關于mangle的選項，使它變成下面這個樣子：
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
},
mangle: {
safari10: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
另一個 bug
實際上，除此之外，還有另外一個bug也會影響到vue網頁在iOS 10上的展現(xiàn)，特別是當你用到廣為流傳的Swiper插件的時候。這是因為Swiper插件中用到了ES6的語法a = b ** c，a是b的c次方，而iOS 10的Safari里不認識這樣的語法，認為這是一個錯誤，所以你需要讓Swiper經過babel的包裝，而缺省狀態(tài)下babel是不對node_modules里的模塊進行編譯的。
解決方法是在項目根目錄下新建一個文件vue.config.js，在里面添加如下語句：
module.exports = {
chainWebpack: config => {
config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)
}
}
至此，通常情況下導致項目出現(xiàn)白屏的問題，總結完畢
