vue 白屏問題彙總（經過廣泛用戶反饋最終章）

項目中偶爾會遇到vue 第一次打開白屏現象，針對這個問題，找了不同環境下的處理方法，留個紀念

1，ios10 出現白屏

原因是由於ios 10中Safari中錯誤描述如下:當你定義一個與參數同名的for循環迭代變量時，我們錯誤地認爲這是一個語法錯誤。解決方法如下：

• 進入build文件夾；
• 找到webpack.prod.conf.js文件；
• 在UglifyPlugin的定義裏添加關於mangle的選項，使它變成下面這個樣子

 new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        },
        mangle: {
          safari10: true
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

2，Swiper插件導致白屏

解決方法是在項目根目錄下新建一個文件vue.config.js，在裏面添加如下語句：

module.exports = {
  chainWebpack: config => {
    config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)
  }
}

3，npm run build打包頁面空白

我們會發現頁面head中引用的js和css文件是出現了路徑錯誤，這裏修改如下：

解決位置：config/index.js文件：把assetsPublicPath: '/'改爲assetsPublicPath: './'

build: {
    assetsPublicPath: './',
}

4，升級vue2+部分手機訪問出現頁面空白

npm run dev後可能出現無法加載到路由模板的信息。

解決位置：config/index.js文件：把 devtool: '#eval-source-map'  改爲devtool:'inline-source-map'

 

5，升級vue2+IP訪問頁面空白

默認只能通過localhost或者127.0.0.1才能訪問，如果使用本機的Ip地址會出現無法訪問到的情況。

解決位置：config/index.js文件：把config/index.js中“host” 配置爲“0.0.0.0”就可以解決，或者設置爲你電腦的IP地址也行：

6，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"]
     }
};

 

博主以上方法均試過，但依舊有小部分機型手機打開爲白屏（根據市場用戶使用情況，遇到的白屏均爲小部分iphone，真叫人腦殼疼），

1）於是開始理性的分析，首先白屏的原因與靜態資源沒加載相關，所以優先排查打包後的index.html文件，發現文件裏面引用資源的路徑爲

<script type=text/javascript src=./static/js/js/app.js></script>

會不會是 打包後沒帶引號引起的？

需要在webpack.prod.conf.js 找到minify參數

講 removeAttributeQuotes: true 改爲  removeAttributeQuotes: false 打包後，已經自動添加了引號

2）通過日誌監控發現，部分用戶請求了 www.**.com/#/static/js/app.js 路徑，靜態資源路徑異常，

需要在config ->index.js文件裏 build 裏面 assetsPublicPath 參數 ，路徑改爲 域名+'/'

assetsPublicPath: 域名+'/'  再次打包部署，等待用戶反饋

 

終於，功夫不負有心人，剩餘的小部分白屏用戶，也可以正常訪問了。開心的不得了~