当前位置：首页 - 正文

【前端工程化】vue2+webpack3项目迁移vite2踩坑总结

发布网友发布时间：2024-10-13 16:17

共1个回答

热心网友时间：2024-10-13 16:14

为提升开发效率，公司决定将维护已久的后台管理系统（vue2+webpack3）升级到vite2。本文将记录迁移过程中的问题及解决方案。

迁移前后对比

升级后，vite2以更快的速度和热更新显著改善了开发体验。

迁移流程

创建新vite项目，不选ts版本，使用npm作为包管理工具。

安装依赖并启动项目，确认vue2支持。

配置vite支持vue2，删除@vitejs/plugin-vue，安装vite-plugin-vue2并调整相关配置。

复制原项目业务代码，迁移静态资源和index.html，更新package.json和依赖。

配置环境变量，处理cross-env，确保项目启动顺利。

项目开发阶段报错处理

依次处理找不到依赖、路径问题、import引入、动态组件引入、less路径等报错。

项目打包处理

启用@vitejs/plugin-legacy处理低版本浏览器兼容。
使用autoprefixer处理css前缀，确保浏览器兼容。

总结

迁移成功后，项目打包无误，可部署测试。vite2生态成熟，但仍需评估项目特有需求是否已满足，未来将持续更新迁移经验。

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com