vue在低版本的iOS下出现白屏现象解决方案

最新推荐文章于 2024-05-04 22:15:22 发布
最新推荐文章于 2024-05-04 22:15:22 发布
阅读量2.2k 收藏 1
点赞数
文章标签： javascript 移动开发 webpack ViewUI
原文链接：https://juejin.im/post/5acb3b4cf265da237b2263c7
版权

使用vue-cli脚手架搭建的项目时，在build之后发布到线上环境，低版本的iOS（测试过iOS 9.x）出现白屏；

经测试是由于source-map引起的；

所以在config文件夹下找到index.js，进行如下操作即可规避这个问题；

productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
//devtool: '#source-map',复制代码

其它vue相关白屏问题集锦：

http://www.fly63.com/article/detial/287


weixin_34082789
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 首页加载缓慢、白屏现象的原因与解决办法
LSL3521的博客
03-31 8198
vue项目打包上线后，首次打开会发现加载很慢，出现白屏的问题， 一、问题原因 打开控制台查看文件加载情况，会发现app.js/vendor.js这两个文件加载时间较长 二、解决办法 1、图片压缩 使用webpack打包文件时，可以看到图片资源显示过大，使用工具进行压缩 2、去掉.map文件 webpack打包文件时，会看到有一些.map文件生成 修改： 找到config文件夹...
vue 解决IOS10低版本白屏的问题
01-18
但是在ios8 9上出现了空白屏的原理，经过测试以后发现是低版本不兼容es6的语法，经过几番尝试找到了最优解。 1 空白屏问题 首先安装babel-polyfill,安装命令：npm install –save-dev babel-polyfill 安装成功后找到...
vue打包好的项目运行出现白屏
susan的博客
11-01 427
vue项目打包好的网页——访问页面出现白屏解决办法记录
2024年Web前端最全vue+IOS9页面白屏_离线swiper，web可视化开发工具
最新发布
2401_84412194的博客
05-04 921
但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。然后启动IOS9的模拟器，再连接浏览器，查看console的错误日志。如果有的组件没有离线版本，可复制源码，然后放在src/目录文件夹下的任何地方，那么打包的时候就会编译成兼容性好的es5语法(前提是引用的babel)
vue项目ios(苹果)系统打开显示空白页问题
CCKing7的博客
02-23 3831
SyntaxError:Invalid regular expression: invalid group specifier name
Vue打包后，打开项目出现项目白屏情况
qq_44849271的博客
08-18 1654
Vue打包后的项目白屏 使用npm run build打包Vue项目后，项目白屏 在dist文件夹打开index.html 这个问题一般来说是打包后，项目文件路径对不上 解决方案： 在根目录(跟src文件夹同级别)下添加vue.config.js文件。 在vue.config.js文件中添加module.exports={publicPath:’./’}代码 最后重新打包 ...
vue项目打包白屏解决
m0_73321385的博客
06-13 8900
如果使用了 Vue Router history 模式，在打包后需要配置服务器，以避免出现404错误。在 Vue 项目中，打包后会生成一个 dist 目录，确保 index.html 引用的资源路径都是相对于 dist 目录的。如果在本地测试时没有问题，但是打包后出现了白屏，可能是因为本地使用了服务器，但是打包后未启动服务器，需要手动启动服务器。如果打包后出现了白屏，可能是因为路由没配置正确。可以检查路由文件是否正确引入、是否正确配置了路由及其子路由等。如果没有生成，说明打包过程出现了问题。
详解一次Vue低版本安卓白屏问题的解决过程
10-16
主要介绍了详解一次Vue低版本安卓白屏问题的解决过程,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
10-17
在使用 Vue-cli3 创建的项目中，可能会遇到在安卓低版本系统或 Internet Explorer（IE）浏览器上出现白屏的问题。这通常是由于这些老旧平台不支持 ES6 以上的语法和某些新特性导致的。为了解决这个问题，我们需要...
关于vue-cli3打包代码后白屏的解决方案
01-19
根据以往的经验 根目录下新建 vue.config.js 配置 publicPath module.exports = { ... runtimeCompiler: true, publicPath: './' ... } 满心欢喜的打开，结果还是白屏。打开调试发现文件路径是正确的，这就唧唧...
vue-cli项目不支持苹果低版本?低版本ie游览器?苹果手机打开白屏?快看解决方案,vue es6转es5,支持低版本游览器访问
qq_38265659的博客
06-05 401
让先看看是什么类型的BUG 打开浏览器控制台,看看 啊啊啊!是ES6扩展运算符导致错误. 解决 先找到了是出现问题的使用的第三方库, 先在vue.config.js中指定这个库名 ... transpileDependencies: [ 'xxxxx' // 出现问题的那个库 ], ... 再.babelrc这个文件中加入 ... sourceType: 'unambiguous', ... } 结束,再次重新打包程序,正常!!! ...
vue3 报错 Cant find variable: globalThis
weixin_43073383的博客
12-17 2125
项目打包后使用低版本的浏览器打开报错 解决方法 vue.config.js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import legacy from '@vitejs/plugin-legacy'; // https://vitejs.dev/config/ export default defineConfig({ base: './', plugins: [ vue(),
vue3源码阅读【packages\shared\src\index.ts 】【getGlobalThis】
qq_38862234的博客
07-14 355
vue3源码阅读
ios低版本 globalThis不存在导致的白屏问题
技术前端，忠于热爱 @回忆哆啦没有A梦
11-11 3317
在用Vue3+Ts开发新项目时，在ios10机器下打开是白屏 查找各种原因后，打开console，发现ios10控制台报错：ReferenceError: Can’t find variable: global 解决办法： // index.html页面粘贴以下代码即可 <script> ! function (t) { function e() { var e = this || self; e.globalThis = e, delete t.prototype._T_ } "object"
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了
大师兄
02-29 1888
原文链接:https://dsx2016.com/?p=984 微信公众号:大师兄2016 白屏原因 微信公众号H5白屏现象很多,一部分是浏览器和app自身的原因,一部分是开发异常问题. 如果是开发的bug,多半是js报错,阻断了html的渲染,这种白屏刷新结果仍然是白屏. 还有一种白屏是公众号菜单进入首页或者初次点击链接进入首页白屏,但是刷新又好了. 这种白屏原因可能有很多...
vue2.0在ios9等低版本手机上的出现白屏的解决过程及思路
木豪末的博客
03-26 992
1.先用safari开发模式去定位问题，发现是es6的语法低版本不支持 2.vue默认是对项目文件进行过js的编译的，所以不是开发文件里的语法问题，最后定位到是项目中引用的一个第三方库导致的这个问题 3.将这个需要编译的第三方库加入vue的编译目录，修改webpack.base.conf.js，修改这一块代码 { test: /\.js$/, include:...
vue解决IOS10低版本白屏问题
weixin_30940783的博客
06-25 936
一、方案一 在build文件的webpack.prod.conf.js文件添加以下代码 new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false }, //处理I0S10白屏 mangle: { ...
vue项目踩坑之安卓4,5，ios9页面空白
kayla_wang的博客
05-18 9055
最近在用vue做项目，项目在安卓4,5，ios9页面显示空白，问题解决跟大家分享一下安卓4,5，ios9页面空白原因：低版本不支持es6，需要将es6编译成es5具体解决方法1.npm install --save-dev babel-preset-es2015（安装ES2015转码规则）2.npm install --save-dev babel-polyfill3.mian.js 中引用 im...
解决vue低版本ios，安卓手机浏览器打开H5页面空白的问题
热门推荐
qq_39963516的博客
04-29 1万+
低版ios手机ios8,ios9,安卓6以后的自带浏览器打开VUE开发的H5页面有时候会出现白屏的问题，这是因为vue 项目中es6的方法和语法在这些低版本的手机上不支持，解决办法 es6转es5 一般网上说的流程较为顺利，但是我的看了后面你绝对有所收获，看过不后悔想再来一回 步骤一（较为顺利的解决方案） 1.执行 npm install babel-polyfill 安装一下 babel...
vue项目在ios端模糊查询首次输入不生效解决办法
05-29
在 Vue 中，可以通过在输入框的属性中添加 `autocapitalize="off"` 和 `autocorrect="off"` 来实现禁用。例如： ```html ``` 2. 监听输入框的值变化并手动触发模糊查询 由于 iOS 系统的首字母大写和自动...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值