当前位置: 首页 > news >正文

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

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

http://www.lryc.cn/news/538406.html

相关文章:

  • C语言中printf()函数,格式输出符
  • AI 编程工具—Cursor 进阶篇 数据分析
  • 青少年编程与数学 02-009 Django 5 Web 编程 20课题、测试
  • zookeeper watch
  • vue3.x 的shallowReactive 与 shallowRef 详细解读
  • 鸿蒙NEXT开发-界面渲染(条件和循环)
  • python电影数据分析及可视化系统建设
  • 在本地校验密码或弱口令 (windows)
  • pytest测试专题 - 1.3 测试用例发现规则
  • 零基础学习人工智能
  • LeetCode热题100- 缺失的第一个正数【JavaScript讲解】
  • JAVA泛型介绍与举例
  • 【ISO 14229-1:2023 UDS诊断(会话控制0x10服务)测试用例CAPL代码全解析③】
  • Vivado生成edif网表及其使用
  • Win10环境借助DockerDesktop部署大数据时序数据库Apache Druid
  • mac 意外退出移动硬盘后再次插入移动硬盘不显示怎么办
  • 力扣动态规划-32【算法学习day.126】
  • 【算法进阶详解 第一节】树状数组
  • 【苍穹外卖】学习
  • Python常见面试题的详解8
  • Deepseek R1模型本地化部署与API实战指南:释放企业级AI生产力
  • node.js + html调用ChatGPTApi实现Ai网站demo(带源码)
  • sql语言语法的学习
  • 力扣 最长递增子序列
  • 【linux】在 Linux 服务器上部署 DeepSeek-r1:70b 并通过 Windows 远程可视化使用
  • visutal studio 2022使用qcustomplot基础教程
  • Linux:线程概念、理解、控制
  • Postman如何流畅使用DeepSeek
  • K8S下载离线安装包所需文件
  • 探索Hugging Face:开源AI社区的核心工具与应用实践