vite+vue3开发uni-app时低版本浏览器不支持es6语法的问题排坑笔记

复制代码
重要提示:请首先完整阅读完文章内容后再操作,以免不必要的时间浪费!切记!!!

在使用vite+vue3开发uni-app项目时,存在低版本浏览器不兼容es6语法的问题,如“?.” “??” 等。为了方便使用jenkins自动化部署前端项目,我使用的是 uni-cli而非HBuilderX 创建的项目,当然使用uni-cli创建uni-app项目还有一个好处是可以使用其他软件如 vscode、Cursor 或者webstrom进行开发,这些软件可以集成AI功能,能方便我们使用AI辅助开发,提升开发效率。

在我的项目中使用的vite版本是5.2.8,如果需要前端项目支持低版本的浏览器,或者需要将较新的es语法转换成更低版本,那么只需要在 vite.config.js 中添加 build.target 配置即可,vite官方文档显示build.target的值为string或者string[],可以根据自己的兼容需求进行配置。如果未显式配置build.target,那么vite会使用默认值“modules”,根据文档说明,其作用等同于 ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']。

需要额外说明的是,对于vite v2或之后的版本不需要再单独安装使用包括 @vitejs/plugin-legacy以及其他任何babel插件解决浏览器兼容问题,前文提到vite已经内置了相关配置项(build.target),如果你使用了较新的vite版本,若强行在plugins中使用 legacy(),那么在执行 npm run build 打包时也会有相关配置已被替换的提示。

最坑的点是,不要在开发阶段(npm run dev)到低版本浏览器上验证build.target配置是否生效,必须用npm run build 打包生成的代码来验证,因为这个配置在开发环境是不起作用的,我被整整浪费了3个小时才发现的这个问题,当然可能有我不知道的配置项来控制这个行为。
javascript 复制代码
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        uni(),
        // legacy({
        //     targets: [
        //         "> 1%, last 1 version, ie >= 11",
        //         "safari >= 10",
        //         "Android > 39",
        //         "Chrome >= 60",
        //         "Safari >= 10.1",
        //         "iOS >= 10.3",
        //         "Firefox >= 54",
        //         "Edge >= 15"
        //     ],
        // })
    ],
    build: {
        sourcemap: true,
        target: [
            'chrome58',
            'firefox67',
            'safari11',
            'edge79',
        ],
    },
})
相关推荐
gnip35 分钟前
js上下文
前端·javascript
中草药z36 分钟前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)1 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休1 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel1 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组1 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽1 小时前
threejs入门学习日记
前端·javascript·three.js
朝阳5811 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript