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

技术：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'],
    }),
  ],
}