vue打包部署后出现白屏的问题

最新推荐文章于 2025-05-27 14:01:59 发布

十梦她九

最新推荐文章于 2025-05-27 14:01:59 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Deleven_Blog/article/details/87784922

vue 专栏收录该内容

3 篇文章

订阅专栏

本文针对iOS10.x设备上出现的白屏问题，深入分析了JS加载错误的原因，并提供了一种通过修改webpack配置来避免Safari浏览器解析错误的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

版本支持

对于IOS 10.x无法打开的问题，加载js出错，出现白屏的情况。

具体表现：

打包后手机浏览器输入地址无法打开，Android手机浏览器及QQ等均正常打开，但是IOS手机（系统为10.X的手机，11.X以上的可以正常打开）浏览器，QQ自带浏览器，微信自带浏览器均无法打开。
网络请求没有问题，页面显示白屏

原因：

js加载时出现问题，出现错误
可能报错

1、SyntaxError: Cannot declare a const variable twice: 'e'.
（匿名函数） — vendor.05fd1a5517cb07c89e07.js:43937
t — bootstrap 22fce2de55b8522ae8a5:54
以及
2、[Error] TypeError: undefined is not an object (evaluating 'r[n].call')
    t (manifest.2ae2e69a05c33dfc65f8.js:1:410)
    NHnr (app.0cada6c24949117a7a34.js:1:774647)
    t (manifest.2ae2e69a05c33dfc65f8.js:1:415)
    webpackJsonp (manifest.2ae2e69a05c33dfc65f8.js:1:286)
    全局代码 (app.0cada6c24949117a7a34.js:1)

解决方案：

其实我们都没有错，我们也没写错，uglify也没搞错，错的是Safari本身。他们在第十七万一千零四十一号bug中承认了自己的错误：

进入build文件夹；
找到webpack.prod.conf.js文件；
在UglifyPlugin的定义里添加关于mangle的选项，使它变成下面这个样子：

new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        },
        mangle: {
          safari10: true
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),