DEV Community
·
将旧的Vue CLI项目迁移到Vite
💡
原文英文，约600词，阅读约需3分钟。
📝
内容提要
我将一个旧的Vue CLI项目迁移到Vite，以减少关键和高风险漏洞。迁移步骤包括更新package.json、配置Vite、移动index.html、更新环境变量和脚本，显著提升了构建性能。
🎯
关键要点
- 迁移旧的Vue CLI项目到Vite以减少关键和高风险漏洞。
- Vite是一个快速且简化的现代Web项目构建工具。
- 迁移步骤包括更新package.json、配置Vite、移动index.html、更新环境变量和脚本。
- 第一步是移除所有Vue CLI依赖，包括Babel相关包和core-js依赖。
- 将ESLint配置从.eslintrc迁移到现代的eslint.config.mjs格式，并更新到版本8。
- 添加Vite及其Vue集成插件。
- Vite使用vite.config.js文件定义构建和开发选项。
- 将index.html文件从public文件夹移动到项目根目录，并更新路径引用。
- Vite处理环境变量的方式不同，需要更新或创建.env文件，并以VITE_前缀暴露变量。
- 更新package.json中的脚本以使用Vite二进制文件替代Vue CLI。
- 迁移完成后，可以享受Vite带来的构建性能提升。
- 下一篇文章将分享如何在没有Vue CLI插件的情况下启用Nightwatch，并将Jest迁移到Vitest。
❓
延伸问答
为什么要将旧的Vue CLI项目迁移到Vite？
迁移到Vite可以减少关键和高风险漏洞，并享受更快的构建性能。
迁移到Vite的第一步是什么？
第一步是移除所有Vue CLI依赖，包括Babel相关包和core-js依赖。
如何配置Vite？
使用vite.config.js文件定义构建和开发选项，并添加Vue集成插件。
如何处理环境变量的迁移？
需要更新或创建.env文件，并以VITE_前缀暴露变量。
迁移后如何更新package.json中的脚本？
将脚本更新为使用Vite二进制文件替代Vue CLI命令。
迁移到Vite后有什么性能提升？
迁移后可以享受Vite带来的显著构建性能提升。
➡️
