H5解决可选链在安卓webview chrome 69不起作用的问题

版本信息

ts 复制代码
"dependencies": {
   "@varlet/touch-emulator": "^2.13.4",
   "@varlet/ui": "^2.14.2",
   "hammerjs": "^2.0.8",
   "vue": "^3.2.47"
},
"devDependencies": {
   "@rushstack/eslint-patch": "^1.2.0",
   "@tsconfig/node18": "^2.0.0",
   "@types/hammerjs": "^2.0.41",
   "@types/node": "^18.16.3",
   "@vitejs/plugin-vue": "^4.2.1",
   "@vitejs/plugin-vue-jsx": "^3.0.1",
   "@vue/eslint-config-prettier": "^7.1.0",
   "@vue/eslint-config-typescript": "^11.0.3",
   "@vue/tsconfig": "^0.3.2",
   "eslint": "^8.39.0",
   "eslint-plugin-vue": "^9.11.0",
   "npm-run-all": "^4.1.5",
   "prettier": "^2.8.8",
   "typescript": "~5.0.4",
   "vite": "^4.3.4",
   "vue-tsc": "^1.6.4"
}

问题

本地运行或者打包之后的代码在chrome 69版本不起作用

解决方案

globalThis

这个可以在 index.html 添加

js 复制代码
<script> 
  this.globalThis || (this.globalThis = this) 
</script>

加完之后,那个报错就没有了

可选链

这个需要安装插件

js 复制代码
npm i @babel/plugin-proposal-optional-chaining --save-dev
 
npm i @babel/plugin-proposal-nullish-coalescing-operator --save-dev

npm i rollup-plugin-esbuild --save-dev

修改 vite.config.ts 文件

js 复制代码
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import esbuild from 'rollup-plugin-esbuild'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    {
      ...esbuild({
        target: 'chrome70',
        include: /\.vue|.ts|.js$/,
        loaders: {
          '.vue': 'js'
        }
      }),
      enforce: 'post'
    }
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

重新运行下就没有报错了,页面正常显示!🎉

结尾

本文章提供的方案不一定是最佳方案,如有更好的方案,欢迎留言讨论。

参考文章

vite 链式操作符 ?. 在低版本浏览器不兼容问题 - Cynthia娆墨旧染 - 博客园 (cnblogs.com)

chrome下载链接

Chromium History Versions Download ↓ (vikyd.github.io)

相关推荐
来自星星的坤34 分钟前
Vue 3中如何封装API请求:提升开发效率的最佳实践
前端·javascript·vue.js
vvilkim2 小时前
全面解析React内存泄漏:原因、解决方案与最佳实践
前端·javascript·react.js
vvilkim2 小时前
React批处理(Batching)更新机制深度解析
前端·javascript·react.js
Bayi·2 小时前
前端面试场景题
开发语言·前端·javascript
程序猿熊跃晖3 小时前
Vue中如何优雅地处理 `<el-dialog>` 的关闭事件
前端·javascript·vue.js
进取星辰3 小时前
12、高阶组件:魔法增幅器——React 19 HOC模式
前端·javascript·react.js
拉不动的猪3 小时前
前端低代码开发
前端·javascript·面试
程序员张33 小时前
Vue3集成sass
前端·css·sass
夜跑者3 小时前
axios 在请求拦截器中设置Content-Type无效问题
前端
知识分享小能手3 小时前
JavaScript学习教程,从入门到精通,Ajax与Node.js Web服务器开发全面指南(24)
开发语言·前端·javascript·学习·ajax·node.js·html5