使用vue開發過一段時間了，采用 Vue-cli腳手架中出現一些頁面空白問題的解決方法總匯
1.npm run build打包頁面空白
我們會發現頁面head中引用的js和css文件是出現了路徑錯誤，這里修改如下：
解決位置：config/index.js文件：把assetsPublicPath: '/'改為assetsPublicPath: './'
build: { assetsPublicPath: './', }
2. iOS的Safari下無法打開網頁
webpack-dev-server >= 2.8.0 的版本在 iOS Safari 下無法打開網頁，效果為白屏。
控制台報錯：Can't find variable: SockJS 應該是 Safari 的 BUG，比如下面的代碼就會拋出
Error eval("const a = function () {}; function b() { a(); }; b();")解決方法
1.使用老版本：
yarn add webpack-dev-server@~2.7.0 -D2.其它方法
yarn add babel-plugin-transform-es2015-block-scoping -D修改 webpack 相關配置
{
test: /\.js$/, loader: 'babel-loader', include: [ ..., /node_modules\/webpack-dev-server/ ] }
3.升級vue2+部分手機訪問出現頁面空白
npm run dev后可能出現無法加載到路由模板的信息。
解決位置：config/index.js文件：把 devtool: '#eval-source-map' 改為devtool:'inline-source-map'
dev: { devtool:'inline-source-map', }
4.升級vue2+IP訪問頁面空白
默認只能通過localhost或者127.0.0.1才能訪問，如果使用本機的Ip地址會出現無法訪問到的情況。
解決位置：config/index.js文件：把config/index.js中“host” 配置為“0.0.0.0”就可以解決，或者設置為你電腦的IP地址也行：
dev: { host: '192.168.10.122', }
5.Vue在IE、低版本Android顯示空白問題
這是由於IE對promise的支持不好，我們需要安裝：babel-polyfill和es6-promise:
npm install babel-polyfill npm install es6-promise然后在main.js文件中引用:
import 'babel-polyfill' import Vue from 'vue' import Es6Promise from 'es6-promise' Es6Promise.polyfill()最后 build/webpack.base.conf.js 文件中配置如下：
module.exports = { entry: { app: ["babel-polyfill", "./src/main.js"] } };
6.Vue只在iOS 10出現白屏問題
a:出現變量定義兩次的錯誤描述，如下：
SyntaxError: Cannot declare a let variable twice原因是由於ios 10中Safari中錯誤描述如下:當你定義一個與參數同名的for循環迭代變量時，我們錯誤地認為這是一個語法錯誤。解決方法如下：
找到webpack.prod.conf.js文件，在UglifyPlugin的定義里添加關於mangle的選項
new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false }, mangle: { safari10: true } }, sourceMap: config.build.productionSourceMap, parallel: true }),b:使用Swiper插件：這是由於Swiper插件中用到了ES6的語法a = b ** c，a是b的c次方，而iOS 10的Safari里不認識這樣的語法，認為這是一個錯誤，所以你需要讓Swiper經過babel的包裝，而缺省狀態下babel是不對node_modules里的模塊進行編譯的。解決方法是在項目根目錄下新建一個文件vue.config.js，在里面添加如下語句：
module.exports = { chainWebpack: config => { config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/) } }
總結
vue中出現空白頁面的情況大概也就就上面這些了，如何遇到其他情況，歡迎留言討論總結。