vue-cli + vue3 项目 ios 苹果手机白屏问题

问题描述

vue-cli>vue-cli + vue3 的项目，在苹果手机上打开白屏，安卓手机正常显示。

原因分析

1，借助 vconsole 发现并没有打印报错信息，并且没有请求发出。初步判断可能是 js 新语法的问题（因为安卓手机没有问题）。

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
  // 接下来即可照常使用 `console` 等方法
  console.log('Hello world');
     
  // 可可移除掉
  // vConsole.destroy();
</script>

2，原本最优的方案是，通过 mac 链接苹果手机，可以直接在 mac 上看到苹果手机的控制台，就能定位问题了，可是因为某些原因无法使用 mac。

3，那就只能靠猜，用控制变量的方式：先只保留框架再一步步的加项目代码，看看哪些代码会有影响。

经过初步实现，发现了3种苹果手机无法识别的问题

可选链操作符 ?.

obj.val?.prop

空值合并运算符 ??

leftExpr ?? rightExpr

展开语法和剩余参数 ...

这3个 js 新语法问题，可以配置对应的 babel 插件来解决

// babel.config.js
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-object-rest-spread'
  ]
}

部分 import/export 语法不支持

// components/index.js
import Header from './Header.vue'
export { Header }

// 某文件中
// 无法识别
import { Header } from '@/components'
// 可识别
import Header from '@/components/Header.vue'

解决方案

这样看来，babel 应该会有统一处理 js 新语法的插件。babel 最终的配置如下

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset', '@babel/preset-env'],
  plugins: ['@babel/plugin-transform-runtime']
}

但问题还没有解决！

babel 做降级处理的依据是通过 browserslist 查询出需要支持的浏览器列表。

所以还需要在 .browserslistrc 或是 package.json 中的 browserslist 字段中增加对苹果手机的配置：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead",
  "not ie 11",
  "ios >= 9"
],

加上这个配置后，会发现最终打包的文件变大了几百kb。

另外，browserslist 配置文件，在脚手架创建项目时会自动生成，可以选择作为单独的配置文件，或放到 package.json 中。

以上即可解决。

遇到的坑

1，架构问题

因为这个项目使用的 pnpm 的 monorepo 架构，关键目录如下

-- dist
-- node_modules
-- packages
    -- pc
       -- 正常 vue 项目目录
    -- mobile
       -- 正常 vue 项目目录
-- package.json
-- pnpm-workspace.yaml

一般来说，如果子项目中都用到的依赖，比如 pc 和 mobile 项目都使用了 mockjs，可以放到项目根目录下的 package.json 中，来避免冗余。

但关于 babel 的配置依赖，这样是无效的！

所以，解决方案中 babel 使用的3个依赖，必须放到对应子项目的 package.json 中！

@babel/plugin-transform-runtime
@babel/preset-env
@vue/cli-plugin-babel

2，项目引入其他依赖的问题

这个问题我没有遇到，但发现有其他人遇到，这里也记录下。

问题：如果引入的依赖中也有 js 的高级语法，那也需要做降级处理。

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。

解决如下：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: ['swiper'], // 或直接设置为 true 表示所有。
  // ... 其他配置
})