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)

相关推荐
2501_915918412 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂3 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技3 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip3 小时前
JavaScript二叉树相关概念
前端
attitude.x4 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java4 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)4 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术5 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫5 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css