vite项目低版本浏览器兼容性问题

2024-07-11 01:42| 来源: 网络整理| 查看: 265

技术：vite+vue3+ts+ElementPlus+vant

1、这个是还没打包（开发环境）的实现：先说下问题： app内置的浏览器内核版本太低，导致用app内置浏览器打开，会出现白屏，引入vconsole调试了一下，发现一个问题，提示有个错误的符号 ‘.’，最终把问题锁定在了一个执行语句：

XXX?.xxx

该语句是ES6的新语法，一般浏览器都没有问题，但低版本的浏览器无法解析该语句，所以要进行js转换，一般的vue2项目我们会使用babel，但vite里不好使用babel，需引入另一个插件，esbuild，他可以把指定文件转译成目标文件，如ts->js，话不多说，贴代码。目标文件是vite.config.ts，首先要引入该文件

import esbuild from 'rollup-plugin-esbuild'

然后在defineConfig对象内使用插件属性 //其中vue()是vite脚手架帮我们自动生成的，我们只需要添加一个属性就可以了

plugins: [vue(), { ..., esbuild({ //替换成你想要的谷歌内核版本 target: 'chrome64', loaders: { '.vue': 'js', '.ts': 'js' } }) } ],

2、这个是打包后实现目标文件是vite.config.ts，首先要引入该文件

安装 npm install @vitejs/plugin-legacy -D npm add -D terser //这个一定得安装，不然打包会报错 // vite.config.js import legacy from '@vitejs/plugin-legacy' export default { plugins: [ vue(), legacy({ targets: ['defaults', 'not IE 11'], }), ], }

【本文地址】

公司简介

联系我们