菜单

白屏的解决方法总汇,js_脚本之家

2020年4月9日 - 首页

今天新建项目,然后发现路由也改了 app.vue里面也是啥都没有,

时间: 2017-12-27阅读: 27992标签: vue

但是访问 能访问 里面确实空白的

使用vue开发过一段时间了,采用
Vue-cli脚手架中出现一些页面空白问题的解决方法总汇

白屏的解决方法总汇,js_脚本之家。错误:

1.npm run build打包页面空白

错误原因:

我们会发现页面head中引用的js和css文件是出现了路径错误,这里修改如下:

path:’/’只能有1个
整个项目只能有一个,然后我要重定向到login页面,我path又没配置好。

解决位置:config/index.js文件:把assetsPublicPath:
‘/’改为assetsPublicPath: ‘./’

解决办法如下:

build: { assetsPublicPath: './',}

以上这篇vue项目出现页面空白的解决方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

  1. 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-polyfillnpm 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中出现空白页面的情况大概也就就上面这些了,如何遇到其他情况,欢迎留言讨论总结。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图