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

紫轩阁

已于 2022-12-20 14:09:30 修改

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端 typescript

于 2022-12-19 17:54:26 首次发布

本文链接：https://blog.csdn.net/slice_93/article/details/128375744

本文介绍了在Vite构建的Vue3.2项目中，如何解决因内置浏览器内核低导致的ES6语法错误，通过引入esbuild进行转译，并在vite.config.ts中配置，确保在不同版本浏览器中的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

技术：vite+vue3.2+ts+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'],
    }),
  ],
}