vite+vue3开发uni-app时低版本欣赏器不支持es6语法的题目排坑笔记 ...

1. 重要提示：请首先完整阅读完文章内容后再操作，以免不必要的时间浪费！切记！！！
3. 在使用vite+vue3开发uni-app项目时，存在低版本浏览器不兼容es6语法的问题，如“?.” “??” 等。为了方便使用jenkins自动化部署前端项目，我使用的是 uni-cli而非HBuilderX 创建的项目，当然使用uni-cli创建uni-app项目还有一个好处是可以使用其他软件如 vscode、Cursor 或者webstrom进行开发，这些软件可以集成AI功能，能方便我们使用AI辅助开发，提升开发效率。
5. 在我的项目中使用的vite版本是5.2.8，如果需要前端项目支持低版本的浏览器，或者需要将较新的es语法转换成更低版本，那么只需要在 vite.config.js 中添加 build.target 配置即可，vite官方文档显示build.target的值为string或者string[]，可以根据自己的兼容需求进行配置。如果未显式配置build.target，那么vite会使用默认值“modules”，根据文档说明，其作用等同于 ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']。
7. 需要额外说明的是，对于vite v2或之后的版本不需要再单独安装使用包括 @vitejs/plugin-legacy以及其他任何babel插件解决浏览器兼容问题，前文提到vite已经内置了相关配置项（build.target），如果你使用了较新的vite版本，若强行在plugins中使用 legacy()，那么在执行 npm run build 打包时也会有相关配置已被替换的提示。
9. 最坑的点是，不要在开发阶段（npm run dev）到低版本浏览器上验证build.target配置是否生效，必须用npm run build 打包生成的代码来验证，因为这个配置在开发环境是不起作用的，我被整整浪费了3个小时才发现的这个问题，当然可能有我不知道的配置项来控制这个行为。

复制代码

1. import { defineConfig } from 'vite'
2. import uni from '@dcloudio/vite-plugin-uni'
3. // import legacy from '@vitejs/plugin-legacy'
5. // https://vitejs.dev/config/
6. export default defineConfig({
7.     plugins: [
8.         uni(),
9.         // legacy({
10.         //     targets: [
11.         //         "> 1%, last 1 version, ie >= 11",
12.         //         "safari >= 10",
13.         //         "Android > 39",
14.         //         "Chrome >= 60",
15.         //         "Safari >= 10.1",
16.         //         "iOS >= 10.3",
17.         //         "Firefox >= 54",
18.         //         "Edge >= 15"
19.         //     ],
20.         // })
21.     ],
22.     build: {
23.         sourcemap: true,
24.         target: [
25.             'chrome58',
26.             'firefox67',
27.             'safari11',
28.             'edge79',
29.         ],
30.     },
31. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。