版本信息
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)