1. 程式人生 > >vue2.0 在華為手機等手機自帶瀏覽器打開白屏的問題

vue2.0 在華為手機等手機自帶瀏覽器打開白屏的問題

因此 使用 sset 內置 info modules 發現 ron 內容

使用vue2.0 開發的單頁面網站, 在華為部分型號(p20也是....),部分安卓手機打開頁面是空白;

網上的方法是把把es6 轉 為 es5, 當時我使用的 vue-cli , webpack 內置babel,會自動轉碼, 排查這種可能性;

根據理解可能是這些瀏覽器的內核版本比較低,所以在ie8,ie9進行調試, 發現報錯;

技術分享圖片

錯誤指向的是自定義的過濾器的方法,

技術分享圖片

該js文件放在static 目下,並未放入 src/assets目錄下,導致未打包入app.js文件。

在 webpack.base.conf.js 部分內容

 {
        test: /\.js$/,
        loader: 
‘babel-loader‘, include: [resolve(‘src‘), resolve(‘test‘), resolve(‘node_modules/webpack-dev-server/client‘)] },

上面的代碼看出: webpack 為對static 目錄下的js 進行 babel-loader 轉碼。

可以修改為 ( 修改配置後,需要重啟服務 )

      {
        test: /\.js$/,
        loader: ‘babel-loader‘,
        query:{presets:[‘es2015‘]},
        include: [resolve(
‘src‘), resolve(‘test‘), resolve(‘node_modules/webpack-dev-server/client‘), resolve(‘static/js‘)] },

由於我這裏是代碼放不合邏輯, 因此就是文件移入 /assets目錄下。

修改後在ie9環境下無錯誤, 在之前的瀏覽器出現白屏問題解決。

發現使用

import Notification from ‘element-ui/lib/notification‘ 引入組件在ie9 會出現類似; import {Notification} from ‘element-ui‘; 不會出現問題; 總結:
解決此類顯示頁面為空白問題, 可以在ie9 環境下運行代碼, 解決運行時報錯, 在ie9 能正常顯示沒錯誤, 便可解決此類問題

ps : 這個我遇到問題的原因, 僅僅提供解決問題的思路。若其中存在錯誤歡迎指出,在此先謝過。

vue2.0 在華為手機等手機自帶瀏覽器打開白屏的問題