vue框架開發出現頁面空白、白屏的解決方法總彙
1、npm run build 打包頁面空白
我們會發現頁面head中引用的js和css檔案是出現了路徑錯誤,這裡修改如下:
解決位置:config/index.js檔案:把assetsPublicPath: '/'改為assetsPublicPath: './'
1.npm run build打包頁面空白
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 -D
2.其它方法
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)\/.*/)
}
}
轉載於:https://www.cnblogs.com/love314159/articles/9355785.html