记一次vue2项目开发模式从wepack转vite的改造流程

发布网友发布时间：2024-09-30 04:11

共1个回答

热心网友时间：2024-12-03 01:49

我选择在不饱和的工作时间进行一些项目尝试，以此填补空闲时间，也就是所谓的“没事找事做”。这次选择进行的是Vue2项目从Webpack到Vite的开发模式改造，主要是为了适应未来可能难以再次尝试的时机。我特意选择了Vue2项目，因为那时的代码风格和使用习惯可能在之后的项目中不再适用，所以现在是一个很好的学习和实践机会。同时，如果大家对代码高亮感兴趣，可以参考这篇详细的改造流程文章。

在当前环境中，项目基于vue-cli创建，采用webpack-vue2的开发环境，package.json中的配置包括vue.config.js和babel.config.js。为了节省篇幅，我将提供一些示例代码，让大家能够更好地理解配置内容，而不会直接贴出整个文件以避免冗长。

接下来，我们进行改造流程的详细说明。首先引入了Vite和相关插件，确保环境与需求相匹配。具体来说，使用了vite-plugin-vue2@2.0.3来兼容Vue2的环境，选择vite@4.5.3作为Vite版本，考虑到兼容性需求以及node版本至少要达到v18，同时引入了vite-plugin-html@3.2.2和vite-plugin-require@1.2.14以解决多页面和动态模板需求以及require问题。为了处理sass预处理器，采用了dart-sass@1.25.0和sass@1.77.2，以替代原有的node-sass，满足Vite环境的需求。

为了适应新的开发环境，我们在package.json中添加了相应的指令，同时更新了vite.config.js和babel.config.js的配置以确保与Vite的兼容性。别忘了在.eslintrc中定义全局变量IS_VITE，以适应不同开发环境下的设置。接下来，我们来解决一些兼容性问题，例如require的使用和文件查找问题，以及mole.exports的导出方式调整，确保业务代码与Vite环境无缝对接。

为了应对Vite对index.html的特殊处理，我们对public目录下的index.html进行了重命名，创建了_index.html和_preview.html文件，并在根目录添加了额外的HTML文件。同时，我们调整了导入Vue的方式，以确保使用正确的Vue版本，避免了与预编译资源的冲突，以及对跳转逻辑的重新设计。

当前项目面临的一个主要挑战是生产环境中较低的node版本*，导致无法直接引入Vite依赖。这使得实际开发过程变得复杂，需要在本地环境和生产环境之间进行权衡。解决这一问题的推荐方案是在本地环境中创建和管理分支，这样可以将业务代码和依赖更新分别放在不同的分支中进行管理，确保在开发和生产环境之间的顺利过渡。同时，为了方便管理文件和提交，可以将分支的package.json和.lock文件添加到.gitignore中，以便在开发过程中能够继续使用add .命令。尽管目前还没有完美的解决方案，但通过这种方式可以有效缓解当前的问题。

总结一下，Vue2项目从Webpack到Vite的改造流程不难，关键在于环境配置和兼容性调整。尽管面临一些挑战，如node版本*和依赖管理，但通过合理的规划和使用分支管理策略，可以有效解决实际开发过程中的问题，最终实现项目从旧模式到新环境的顺利过渡。