第一種瓦糟，打包后文件引用路徑不對(duì)趟畏，導(dǎo)致找不到文件報(bào)錯(cuò)白屏
解決辦法：修改一下config下面的index.js中bulid模塊導(dǎo)出的路徑瘟判。因?yàn)?code>index.html里邊的內(nèi)容都是通過script標(biāo)簽引入的蕉扮，而你的路徑不對(duì)整胃，打開肯定是空白的。先看一下默認(rèn)的路徑喳钟。
第二種屁使，由于把路由模式mode設(shè)置影響
解決方法：路由里邊router/index.js路由配置里邊默認(rèn)模式是hash，如果你改成了history模式的話奔则，打開也會(huì)是一片空白蛮寂。所以改為hash或者直接把模式配置刪除，讓它默認(rèn)的就行 易茬。如果非要使用history模式的話酬蹋，需要你在服務(wù)端加一個(gè)覆蓋所有的情況的候選資源：如果URL匹配不到任何靜態(tài)資源，則應(yīng)該返回一個(gè)index.html抽莱，這個(gè)頁面就是你app依賴頁面范抓。
所以只要?jiǎng)h除mode或者把mode改成hash就OK了。
第三種岸蜗，項(xiàng)目中使用了es6的語法尉咕，一些瀏覽器不支持es6，造成編譯錯(cuò)誤不能解析而造成白屏
解決方法：
- 安裝 npm install --save-dev babel-preset-es2015
- 安裝 npm install --save-dev babel-preset-stage-3
- 在項(xiàng)目根目錄創(chuàng)建一個(gè).babelrc文件 里面內(nèi)容 最基本配置是：
{
// 此項(xiàng)指明璃岳，轉(zhuǎn)碼的規(guī)則
"presets": [
// env項(xiàng)是借助插件babel-preset-env，下面這個(gè)配置說的是babel對(duì)es6,es7,es8進(jìn)行轉(zhuǎn)碼悔捶，并且設(shè)置amd,commonjs這樣的模塊化文件铃慷，不進(jìn)行轉(zhuǎn)碼
["env", {
"modules": false
}],
// 下面這個(gè)是不同階段出現(xiàn)的es語法，包含不同的轉(zhuǎn)碼插件
"stage-2"
],
// 下面這個(gè)選項(xiàng)是引用插件來處理代碼的轉(zhuǎn)換蜕该，transform-runtime用來處理全局函數(shù)和優(yōu)化babel編譯
"plugins": ["transform-runtime"],
// 下面指的是在生成的文件中犁柜，不產(chǎn)生注釋
"comments": false,
// 下面這段是在特定的環(huán)境中所執(zhí)行的轉(zhuǎn)碼規(guī)則，當(dāng)環(huán)境變量是下面的test就會(huì)覆蓋上面的設(shè)置
"env": {
// test 是提前設(shè)置的環(huán)境變量堂淡，如果沒有設(shè)置BABEL_ENV則使用NODE_ENV馋缅，如果都沒有設(shè)置默認(rèn)就是development
"test": {
"presets": ["env", "stage-2"],
// instanbul是一個(gè)用來測(cè)試轉(zhuǎn)碼后代碼的工具
"plugins": ["istanbul"]
}
}
}
第四種扒腕，如果你的測(cè)試說你的項(xiàng)目在 ios 10 出現(xiàn)白屏問題
一個(gè) bug
你用Vue做了一個(gè)單頁面應(yīng)用，它在一切設(shè)備上都工作正常萤悴，但是突然有一天瘾腰，你的測(cè)試和你說，這個(gè)網(wǎng)站在iOS 10上跑不起來覆履，怎么辦蹋盆？
項(xiàng)目在Safari中報(bào)一個(gè)錯(cuò)誤：
SyntaxError: Cannot declare a let variable twice: 'e'.
可是你沒有寫過這樣的代碼，你怎么可能把一個(gè)名為e的變量定義兩次硝全？打開代碼栖雾，會(huì)看到了這樣的代碼：
let e = e => {
console.log(e);
for (let e of [1, 2, 3])
console.log(e);
};
雖然這段代碼看上去比較奇怪，但是語法上有任何問題嗎伟众？我就愿意定義一個(gè)名為e的函數(shù)析藕，而這個(gè)函數(shù)的唯一入?yún)⒚Q也為e，并且我的for循環(huán)體里還愿意再定義一個(gè)名稱為e的變量凳厢，es6的變量作用域允許我們這樣做账胧，此e和彼e互不干擾，不對(duì)嗎数初？況且很顯然找爱，這段代碼不是人寫的，而是我們?cè)趫?zhí)行npm run build的時(shí)候編譯產(chǎn)生的泡孩。
其實(shí)我們都沒有錯(cuò)车摄，我們也沒寫錯(cuò)，uglify也沒搞錯(cuò)仑鸥，錯(cuò)的是Safari本身吮播。他們?cè)?a target="_blank" rel="nofollow">第十七萬一千零四十一號(hào)bug中承認(rèn)了自己的錯(cuò)誤：
We incorrectly throw a syntax error when declaring a top level for-loop iteration variable the same as a parameter
當(dāng)你定義一個(gè)與參數(shù)同名的for循環(huán)迭代變量時(shí)，我們錯(cuò)誤地認(rèn)為這是一個(gè)語法錯(cuò)誤眼俊。
看意狠，多么謙遜的態(tài)度。所以你也不用太糾結(jié)于一個(gè)白屏幕疮胖，只要找到解決方法就好了环戈。方法其實(shí)很簡單：
1.進(jìn)入build文件夾；
2.找到webpack.prod.conf.js文件澎灸；
3.在UglifyPlugin的定義里添加關(guān)于mangle的選項(xiàng)院塞，使它變成下面這個(gè)樣子：
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
},
mangle: {
safari10: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
另一個(gè) bug
實(shí)際上，除此之外性昭，還有另外一個(gè)bug也會(huì)影響到vue網(wǎng)頁在iOS 10上的展現(xiàn)拦止，特別是當(dāng)你用到廣為流傳的Swiper插件的時(shí)候。這是因?yàn)?code>Swiper插件中用到了ES6的語法a = b ** c，a是b的c次方汹族，而iOS 10的Safari里不認(rèn)識(shí)這樣的語法萧求，認(rèn)為這是一個(gè)錯(cuò)誤，所以你需要讓Swiper經(jīng)過babel的包裝顶瞒，而缺省狀態(tài)下babel是不對(duì)node_modules里的模塊進(jìn)行編譯的夸政。
解決方法是在項(xiàng)目根目錄下新建一個(gè)文件vue.config.js，在里面添加如下語句：
module.exports = {
chainWebpack: config => {
config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)
}
}
至此搁拙，通常情況下導(dǎo)致項(xiàng)目出現(xiàn)白屏的問題秒梳，總結(jié)完畢
