vue-cli迁移Vite不完全指北

vue-cli与Vite同属于Vue官方团队开发的脚手架及开发服务的构建工具，两者在构建方式、编译速度、浏览器支持范围等很多方面都有区别。本文简单聊一下二者的不同，为什么要从vue-cli迁移到Vite，以及具体的迁移步骤。

Vite与vue-cli的区别

两者的不同之处在于：首先从使用的构建工具角度，vue-cli使用的是webpack，Vite使用的是Rollup，因此有生态和使用方法上有天然的不同；其次从工作方式来看，vue-cli会解析每个JS模块的import或require，借助各种loader将应用程序构建成Bundle，而这些工作又需要在webpack-dev-server启动之前完成。因此随着文件越来越多，依赖复杂度越来越高，开发需要等待的时间也说越长。Vite依赖浏览器对ES6模块的原生支持，浏览器通过HTTP直接请求JS模块，且在运行时处理；vue文件、样式文件等则通过插件处理。将耗时的JS模块单独剥离到浏览器带来的好处就是，消耗的时间相比vue-cli有大幅度的减少。

Vite相比vue-cli有编译速度快、编译后文件可读性高等优点，在生态环境、插件数量、浏览器支持范围方面相比老牌的vue-cli还有一定差距。但目前不支持ES6的浏览器已经很少了，而且Rollup应对日常开发好完全没有问题，因此从开发体验角度来说，建议使用Vite。

为什么要迁移到Vite

主要原因还是速度。对于最简单的脚手架模板工程，vue-cli启动时间超过了2秒，Vite只需要0.2秒，只有前者的十分之一。如果是真实的项目，在启动时间上Vite依然可以保持秒级，vue-cli则是肉眼可见的慢。

除了启动阶段，我们在开发过程中还需要看到修改带来的变化。Vite在HMR方面，因为整体Bundle不需要重新解构，所以不管文件的大小，HMR可以做到非常快速，这点同样是vue-cli做不到的。

迁移步骤

下面进入本文的主题，如何从vue-cli迁移到Vite。

#01 更新package.json

项目中用到的@vue/cli-service 及各种插件@vue/cli-plugin-xxx都可以删掉了。

npm un @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex

因为Vite内置了常见的预处理器，sass-loader这样的依赖也可以删除。下面增加Vite相关的依赖

npm i vite -D

如果你使用的Vue版本是2.7，那么需要安装vite-plugin-vue2

npm i vite-plugin-vue2 -D

如果使用的2.6或更早的版本，那么需要安装@vitejs/plugin-vue2

npm i @vitejs/plugin-vue2

如果需要支持JSX/TSX

npm i @vitejs/plugin-vue-jsx -D

上述依赖安装完成后，原来的模板编译器就可以删除了

npm un vue-template-compier

如果html文件中使用到了ejs语法，还需要安装

npm i vite-plugin-ejs

scripts下的相关命令也要修改

#02 移动index.html

将`index.html`文件从public目录移动到项目根目录下。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析

>Vite 将 `index.html` 视为源码和模块图的一部分。Vite 解析 `

将index.html文件从public目录移动到项目根目录下。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析

由于Vite依赖ES模块，原文件中的script需要加上module类型。

#03 配置文件

原来的`vue.config.js`文件名成`vite.config.js`。下面是一个例子，涉及到了jsx配置、@别名、插件的加载、css处理等内容。

#04 更新环境变量

Vite通过`import.meta.env`对象暴露环境变量，其中内置了诸如`import.meta.env.MODE` `import.meta.env.BASE_URL`等变量。同时还可以通过`dotenv`加载更多自定义的环境变量。

npm install dotenv

具体可参考dotenv和Vite文档中关于环境变量的描述。

#05 SFC引用时增加扩展名

在引用组件时需要在文件名后面增加扩展名后缀：

如果不想手动处理或者需要修改的地方很多，可以在vite.config.js中通过修改`resolve.extensions`配置项来自动处理。

#05 删除webpack引入的注释

webpack在处理类似路由等模块时会产生动态引入的注释，Vite则会为模块自动命名（例如About.[hash].js），因此这些注释需要删除。

以上即为从vue-cli迁移到Vite的主要步骤，在实例操作过程可能还需要修改babel、eslint、jsconfig.json、husky等配置，因不同项目差异较大，就不在这里赘述了。在完成这些步骤之后，项目应该就可以通过Vite启动了。

文章最后推荐一个自动转换的小工具：[webpack-to-vite](https://github.com/originjs/webpack-to-vite)，祝大家Vite愉快。