問(wèn)題描述

vue-cli + vue3 的項(xiàng)目，在蘋(píng)果手機(jī)上打開(kāi)白屏，安卓手機(jī)正常顯示。

原因分析

1，借助 vconsole 發(fā)現(xiàn)并沒(méi)有打印報(bào)錯(cuò)信息，并且沒(méi)有請(qǐng)求發(fā)出。初步判斷可能是 js 新語(yǔ)法的問(wèn)題（因?yàn)榘沧渴謾C(jī)沒(méi)有問(wèn)題）。

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默認(rèn)會(huì)掛載到 `window.VConsole` 上
  var vConsole = new window.VConsole();
  // 接下來(lái)即可照常使用 `console` 等方法
  console.log('Hello world');
     
  // 可可移除掉
  // vConsole.destroy();
</script>

2，原本最優(yōu)的方案是，通過(guò) mac 鏈接蘋(píng)果手機(jī)，可以直接在 mac 上看到蘋(píng)果手機(jī)的控制臺(tái)，就能定位問(wèn)題了，可是因?yàn)槟承┰驘o(wú)法使用 mac。

3，那就只能靠猜，用控制變量的方式：先只保留框架再一步步的加項(xiàng)目代碼，看看哪些代碼會(huì)有影響。

經(jīng)過(guò)初步實(shí)現(xiàn)，發(fā)現(xiàn)了3種蘋(píng)果手機(jī)無(wú)法識(shí)別的問(wèn)題

• 可選鏈操作符 ?.

obj.val?.prop

• 空值合并運(yùn)算符 ??

leftExpr ?? rightExpr

• 展開(kāi)語(yǔ)法 和 剩余參數(shù) ...

這3個(gè) js 新語(yǔ)法問(wèn)題，可以配置對(duì)應(yīng)的 babel 插件來(lái)解決

// 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 語(yǔ)法不支持

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

// 某文件中
// 無(wú)法識(shí)別
import { Header } from '@/components'
// 可識(shí)別
import Header from '@/components/Header.vue'

解決方案

這樣看來(lái)，babel 應(yīng)該會(huì)有統(tǒng)一處理 js 新語(yǔ)法的插件。babel 最終的配置如下

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

但問(wèn)題還沒(méi)有解決！

babel 做降級(jí)處理的依據(jù)是通過(guò) browserslist 查詢出需要支持的瀏覽器列表。

所以還需要在 .browserslistrc 或是 package.json 中的 browserslist 字段中增加對(duì)蘋(píng)果手機(jī)的配置：

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

加上這個(gè)配置后，會(huì)發(fā)現(xiàn)最終打包的文件變大了幾百kb。

另外，browserslist 配置文件，在腳手架創(chuàng)建項(xiàng)目時(shí)會(huì)自動(dòng)生成，可以選擇作為單獨(dú)的配置文件，或放到 package.json 中。

以上即可解決。

遇到的坑

1，架構(gòu)問(wèn)題

因?yàn)檫@個(gè)項(xiàng)目使用的 pnpm 的 monorepo 架構(gòu)，關(guān)鍵目錄如下

-- dist
-- node_modules
-- packages
    -- pc
       -- 正常 vue 項(xiàng)目目錄
    -- mobile
       -- 正常 vue 項(xiàng)目目錄
-- package.json
-- pnpm-workspace.yaml

一般來(lái)說(shuō)，如果子項(xiàng)目中都用到的依賴，比如 pc 和 mobile 項(xiàng)目都使用了 mockjs，可以放到項(xiàng)目根目錄下的 package.json 中，來(lái)避免冗余。

但關(guān)于 babel 的配置依賴，這樣是無(wú)效的！

所以，解決方案中 babel 使用的3個(gè)依賴，必須放到對(duì)應(yīng)子項(xiàng)目的 package.json 中！

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

2，項(xiàng)目引入其他依賴的問(wèn)題

這個(gè)問(wèn)題我沒(méi)有遇到，但發(fā)現(xiàn)有其他人遇到，這里也記錄下。

問(wèn)題：如果引入的依賴中也有 js 的高級(jí)語(yǔ)法，那也需要做降級(jí)處理。

默認(rèn)情況下 babel-loader 會(huì)忽略所有 node_modules 中的文件。如果你想要通過(guò) Babel 顯式轉(zhuǎn)譯一個(gè)依賴，可以在這個(gè)選項(xiàng)中列出來(lái)。

解決如下：

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

以上。

參考

ios 白屏問(wèn)題

browserslist 的作用文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-790401.html

到了這里，關(guān)于vue-cli + vue3 項(xiàng)目 ios 蘋(píng)果手機(jī)白屏問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！