为什么要从VueCLI迁移到Vite?
主要原因是速度。Vite的开发服务器速度很快。因为它对JavaScript模块使用原生浏览器支持,所以服务器的启动时间是即时的。同时这还意味着,无论程序大小如何,热模块更新都会很快,因为不必重建整个bundle。为了演示,下面一个使用VueCli和Vite创建完全相同的项目进行比较:
启动时间:
VueCLI-毫秒(超过2秒)
Vite-ms(远低于半秒-快10倍)
热更新(HMR):
VueCLI-ms
Vite-基本上是即时的记住,这只是一个搭建的简单示例。随着项目的增长,VueCLI版本的速度会逐渐变慢,而Vite却承诺无论项目大小,都能在相同的级别速度上运行。
如何从VueCLI迁移到Vite
为了解决这个问题,本文使用VueCLI构建了一个全新的项目,将与您一起完成将其转换为Vite的步骤。当然,实际工作中通常不会从一个全新的VueCLI项目开始,但很多步骤是通用的。此外,本文选择Vue2作为演示,因为大多数人可能仍然在使用Vue2。同时,本文也指出了Vue3的不同之处(它比vue2迁移更简单)。
第1步:更新依赖项
迁移到Vite的第一步是更新package.json中的依赖项。我们需要删除与VueCLI相关的依赖项。
//package.json
"
vue/cli-plugin-babel":"~4.5.0",//remove"
vue/cli-plugin-eslint":"~4.5.0",//remove"
vue/cli-plugin-router":"~4.5.0",//remove"
vue/cli-plugin-vuex":"~4.5.0",//remove"
vue/cli-service":"~4.5.0",//remove我们还可以删除sass-loader,因为Vite内置支持常见的预处理器。我们也可以继续使用自己选择的CSS预处理器。但请注意,Vite建议将原生CSS变量与PostCSS插件一起使用,编写简单、符合未来标准的CSS。
//package.json
"sass-loader":"^8.0.2"//remove
最后,添加Vite作为依赖项,以及Vite的Vue插件组件,以支持单文件组件。
//package.json
"
vitejs/plugin-vue":"^1.6.1","vite":"^2.5.4",
此外,因为我们正在迁移Vue2项目,我们还需要添加社区为Vue2开发的Vite插件。如果我们使用Vue3,就没有必要这样做。
//package.json
"vite-plugin-vue2":"1.9.0"//addforVue2
安装了Vite插件后,我们现在还可以删除vue模板编译器,因为Vitevue插件有这个功能。
//package.json
"vue-template-