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',
        ],
    },
})
相关推荐
橘颂TA33 分钟前
【C++】C++11特性的介绍和使用(第三篇)
前端·c++·算法·c++11
爷_7 小时前
字节跳动震撼开源Coze平台!手把手教你本地搭建AI智能体开发环境
前端·人工智能·后端
charlee449 小时前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro10 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin10 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说10 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang45310 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself24311 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
三口吃掉你11 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself24311 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui