北京企业网站设计公司,wordpress内容爬取,济南网站设计公司推荐,重庆川九建设有限责任公司官方网站目录 问题描述原因分析解决方案遇到的坑1#xff0c;架构问题2#xff0c;项目引入其他依赖的问题 参考 问题描述
vue-cli vue3 的项目#xff0c;在苹果手机上打开白屏#xff0c;安卓手机正常显示。
原因分析
1#xff0c;借助 vconsole 发现并没有打印报错信息架构问题2项目引入其他依赖的问题 参考 问题描述
vue-cli vue3 的项目在苹果手机上打开白屏安卓手机正常显示。
原因分析
1借助 vconsole 发现并没有打印报错信息并且没有请求发出。初步判断可能是 js 新语法的问题因为安卓手机没有问题。
script srchttps://unpkg.com/vconsolelatest/dist/vconsole.min.js/script
script// VConsole 默认会挂载到 window.VConsole 上var vConsole new window.VConsole();// 接下来即可照常使用 console 等方法console.log(Hello world);// 可可移除掉// vConsole.destroy();
/script2原本最优的方案是通过 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-babel2项目引入其他依赖的问题
这个问题我没有遇到但发现有其他人遇到这里也记录下。
问题如果引入的依赖中也有 js 的高级语法那也需要做降级处理。 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖可以在这个选项中列出来。 解决如下
// vue.config.js
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: [swiper], // 或直接设置为 true 表示所有。// ... 其他配置
})
以上。 参考
ios 白屏问题
browserslist 的作用
