詳解Vue-cli3 項目在安卓低版本系統和IE上白屏問題解決
最近遇到一個問題，用 Vue 開發的項目在最近兩年新出的安卓手機上沒問題，在三四年前的舊手機上出現白屏問題 。分析一下應該是安卓系統版本的原因，目前已知的是Android 6.0 以上都 OK，6.0 以下就不行了 。
低版本安卓系統內置的 webview 不支持 ES6 語法等一些新特性，所以報錯 。但在手機上調試不方便，受一篇文章的啟發， IE 瀏覽器也是同樣的問題，所以可以在 IE 上調試，一個調好了兩個就都好了 。突然發現萬惡的 IE 還是有點用的…
網上的文章大部分是 Vue-cli 2.x 版本的解決方案，但 Vue-cli 3 跟之前的版本還是有很大差異的，可能是我比較菜，看了 n 篇文章還是不知道怎么配置 。經過努力，終于梳理出了基于 Vue-cli 3 的項目如何做兼容性配置的步驟：
1. 根目錄下新建 .babelrc 文件
在項目根目錄下新建 .babelrc 文件，跟 package.json 同級 。將以下代碼復制到 .babelrc 文件中
2. 修改 babel.config.js
將以下代碼復制到 babel.config.js 文件中，其中最上面四行是打包時刪除 console 的配置，如不需要可以刪除 。
3. 修改 vue.config.js
用 vue-cli 3 新建項目時 ， 默認是沒有這個配置文件的，沒有則在項目根目錄下新建一個 vue.config.js ， 也是跟 package.json 同級 。
解決白屏問題需要添加的代碼：
4. 修改 main.js 文件
找到 項目根目錄/src/main.js，添加以下代碼
【詳解Vue-cli3 項目在安卓低版本系統和IE上白屏問題解決】
5. 安裝依賴
在根目錄下執行以下語句 。如果在第二步不需要配置生產環境刪除 console 可以不要最后一個 babel-plugin-transform-remove-console。
以上五步配置完就可以解決 Vue 項目在低版本安卓系統和 IE 瀏覽器下顯示空白的問題了 。
附完整的 vue.config.js
這里引了幾個依賴，如果運行報錯則根據提示安裝相應依賴即可 。
以上就是本文的全部內容 ， 希望對大家的學習有所幫助 。
