现在还在用Vite做Vue3项目？Vue3 CLI你真的了解它的正确打开方式吗？

去年底帮朋友优化一个企业级老项目重构到Vue3的迁移方案时,发现他一开始直接把Vue2 CLI搭的Vue2代码硬塞Vite改，改了三天webpack的loader配置迁移不过去，还搞混了插件适配逻辑，最后差点耽误交付，其实很多刚接触Vue3生态的开发者或者要维护/重构老项目的人，都会陷入一个误区：觉得Vite快就一定要用，Vue3 CLI已经彻底过时了，但真实情况是，Vue3 CLI至今仍是很多企业级项目的首选脚手架，它和Vite不是非此即彼的竞争关系，而是各有各的适用场景，而且它还在持续更新迭代，适配了很多现代开发需求。

什么是Vue3 CLI？它和之前的Vue CLI 2/3/4有什么本质区别？

很多人可能把“Vue3 CLI”和“Vue CLI v5”混为一谈，其实Vue3 CLI的官方说法是Vue CLI 5.x，它是专门为Vue3打造的正式版脚手架，不过也保留了对Vue2项目的兼容能力（只是默认不再自动创建Vue2项目），它和之前版本的最大区别，不是换了Vue的核心库适配，而是底层构建工具的可选性——Vue CLI 2用的是Webpack 3/4的定制封装，Vue CLI 3/4是Webpack 4/5的完全封装，而Vue3 CLI（也就是Vue CLI 5.x）默认用的是Webpack 5，但也提供了一个官方插件@vue/cli-plugin-vite，可以一键切换到Vite作为构建工具。

除了构建工具的灵活性,Vue3 CLI还有几个核心升级：

1. TypeScript深度集成：默认可以直接选择TypeScript作为开发语言，不需要手动再安装额外的插件和配置，而且支持了Vue SFC的<script setup>语法糖的代码提示、类型检查等功能；
2. Webpack 5新特性：比如持久化缓存（默认开启，能把第二次之后的构建速度提升30%以上）、Tree Shaking优化（更好的代码压缩，减少打包体积）、模块联邦支持（适合微前端项目）；
3. 插件生态的适配升级：之前Vue3生态刚出来的时候，很多第三方插件比如element-plus的旧版CLI插件不兼容，现在Vue3 CLI的官方插件和主流第三方插件都已经完全适配好了；
4. Node.js版本要求：最低要求是Node.js 14.18+或者16.0+，现在最新的Vue CLI 5.0.8甚至已经初步适配了Node.js 22 LTS，不用担心Node.js版本升级导致的问题。

现在Vue3项目到底选Vue3 CLI还是Vite？

这是很多开发者打开百度搜索Vue3相关内容时,看到最多的问题之一，也是最容易产生争议的，其实不用纠结，只要搞清楚这两个工具的核心适用场景，就能做出正确的选择。

先说说Vite的核心优势和适用场景： Vite的核心是“开发时极速，生产时用Rollup打包”，开发时利用浏览器的ES Modules特性，不需要像Webpack那样先把所有模块打包成一个bundle，所以启动速度和热更新速度都非常快，哪怕项目有上千个组件，启动也只需要几秒，修改一个组件的代码，浏览器几乎能瞬间看到变化，所以Vite更适合：

• 纯Vue3新项目,尤其是个人项目、小团队项目、轻量级应用；
• 对开发效率要求极高,不需要太多复杂定制化Webpack配置的项目；
• 要尝试Vue3最新生态（比如最新版本的Pinia、Vue Router 4、Nuxt 3等）的项目。

再说说Vue3 CLI的核心优势和适用场景： Vue3 CLI的核心是“稳定可靠，Webpack生态丰富，定制化能力极强”，虽然开发时的启动和热更新速度比Vite慢，但它的底层Webpack经过了多年的企业级验证，几乎能满足所有复杂的开发需求，而且插件生态已经非常成熟，不管是要用什么奇怪的loader或者插件，都能找到现成的解决方案，所以Vue3 CLI更适合：

• 企业级老项目从Vue2重构到Vue3的场景,因为很多老项目可能依赖了特定的Webpack插件或者loader，迁移成本更低；
• 需要大量复杂定制化构建配置的项目,比如微前端项目、SSR项目（不过SSR现在更推荐用Nuxt 3，但如果是自己手写SSR，Webpack的生态更成熟）、需要同时支持多环境（开发、测试、预发布、生产）且每个环境的配置差异很大的项目；
• 要兼容一些旧的第三方库或者工具的项目,比如有些旧的UI组件库可能只兼容Webpack的某些特性；
• 团队成员更熟悉Webpack,不想花太多时间学习新工具的项目。

刚才提到过Vue3 CLI有一个官方插件可以一键切换到Vite，所以如果你拿不准，可以先用Vue3 CLI创建一个默认Webpack的项目，等项目稳定下来之后，再用@vue/cli-plugin-vite插件一键切换到Vite试试，或者在开发环境用Vite，生产环境用Webpack打包，这样就能兼顾开发效率和生产稳定性。

刚从Vue2转过来的新手，怎么快速上手Vue3 CLI？

如果你之前用过Vue CLI 2/3/4创建Vue2项目，那上手Vue3 CLI其实非常简单，只需要更新一下CLI的版本，然后按照提示选择Vue3相关的配置就行，具体步骤如下：

第一步：检查并更新Node.js和npm/yarn/pnpm的版本

刚才说过,Vue3 CLI最低要求是Node.js 14.18+或者16.0+，推荐用Node.js 18 LTS或者22 LTS，因为这两个版本是长期支持版本，稳定可靠，而且性能更好，你可以打开终端（Windows的话是CMD或者PowerShell，Mac或者Linux的话是Terminal），输入node -v和npm -v来检查版本，如果版本太低，就去Node.js官网下载最新的LTS版本安装，安装的时候会自动更新npm，如果平时用的是yarn或者pnpm，也可以用对应的命令更新，比如yarn set version stable或者pnpm add -g pnpm。

第二步：全局安装或者更新Vue CLI

全局安装Vue CLI的命令是npm install -g @vue/cli，如果之前已经安装过旧版本的Vue CLI，比如2.x或者3.x/4.x，那需要先卸载旧版本，再安装新版本，卸载命令是npm uninstall -g vue-cli或者npm uninstall -g @vue/cli（注意旧版本的Vue CLI包名是vue-cli，3.x之后的是@vue/cli），安装完成之后，可以输入vue --version来检查版本，现在最新的版本是5.0.8。

第三步：创建Vue3项目

全局安装好之后,就可以用vue create命令创建Vue3项目了，比如你想创建一个叫my-vue3-app的项目，就输入vue create my-vue3-app，输入命令之后，终端会出现一个交互式的选择界面，你可以用上下箭头键选择，用空格键确认，用Enter键进入下一步。

这里重点说一下Vue3项目的选择步骤：

1. 首先会让你选择预设,有Default ([Vue 3] babel, eslint)和Default ([Vue 2] babel, eslint)还有Manually select features三个选项，新手的话可以先选第一个默认的Vue3预设，这个预设会自动安装Babel（用来把ES6+的代码转换成ES5兼容旧浏览器）和ESLint（用来检查代码规范），不需要你手动配置；如果是需要TypeScript、Vue Router、Pinia、CSS预处理器等功能的话，就选第三个手动选择功能。
2. 如果选了手动选择功能,接下来会让你勾选需要的功能，这里推荐新手勾选Babel、TypeScript、Router、Vuex（或者Pinia，不过Vue CLI 5.x默认的手动选择界面里还是Vuex，你可以创建完项目之后再手动换成Pinia）、CSS Pre-processors、Linter / Formatter这几个，这些都是开发Vue3项目常用的功能。
3. 勾选完功能之后,会让你选择每个功能的具体配置：
   • 选择Vue的版本：这里要选3.x；
   • 是否使用Class风格的组件语法：新手推荐选No，因为现在Vue3官方推荐用<script setup>语法糖，更简单；
   • 是否使用Babel和TypeScript一起转译：推荐选Yes，这样可以兼容更多旧浏览器；
   • 是否使用History模式的路由：如果你的项目需要部署到生产环境，推荐选Yes，这样URL会更美观，没有号，但部署的时候需要服务器配置；如果只是本地开发或者不确定服务器配置，就选No；
   • 选择CSS预处理器：推荐选Sass/SCSS (with dart-sass)，因为dart-sass是官方推荐的，性能更好；
   • 选择ESLint的配置：推荐选ESLint + Standard config，这个配置比较宽松，适合新手；
   • 选择什么时候检查代码规范：推荐选Lint on save，这样每次保存文件的时候都会自动检查；
   • 选择把Babel、ESLint等的配置放在哪里：推荐选In dedicated config files，这样配置文件会单独放在项目根目录，更清晰；
   • 是否把当前的选择保存为预设：如果下次还要创建类似的项目，可以选Yes，否则选No。

第四步：启动项目

创建完成之后,终端会提示你进入项目目录，然后用npm run serve命令启动开发服务器，启动完成之后，会给出一个本地的访问地址（一般是http://localhost:8080），你把这个地址复制到浏览器里打开，就能看到Vue3的欢迎页面了，如果用的是yarn，就用yarn serve，用pnpm的话就用pnpm serve。

用Vue3 CLI创建的项目，怎么快速换成Vite？

如果你先用Vue3 CLI创建了一个默认Webpack的项目，后来觉得开发速度太慢，想换成Vite，其实非常简单，只需要用官方提供的@vue/cli-plugin-vite插件一键切换就行，具体步骤如下：

1. 进入你的Vue3项目目录；
2. 输入vue add vite命令安装插件；
3. 安装完成之后,项目的package.json里的scripts会自动更新，增加了vite（启动开发服务器）、vite:build（生产环境打包）、vite:preview（预览生产环境打包的结果）这三个命令；
4. 你可以用npm run vite命令启动Vite开发服务器试试，速度会比之前快很多。

不过要注意,一键切换到Vite之后，有些Webpack的配置或者插件可能不兼容，比如有些旧的CSS预处理器配置、有些自定义的loader等，这时候需要你手动修改Vite的配置文件（vite.config.js或者vite.config.ts）来适配，不过一般来说，主流的第三方库和工具都已经有Vite的适配插件了，你可以去对应的官网或者GitHub上查一下。

Vue3 CLI未来的发展趋势是什么？

很多人担心Vue3 CLI会被Vite取代，其实不会，Vue官方也明确说过，Vue3 CLI和Vite是互补的关系，不是竞争的关系，Vue官方会同时维护这两个工具，不过Vue3 CLI未来的发展方向可能会更偏向于“Webpack的最佳实践封装”和“老项目的迁移支持”，而Vite会更偏向于“现代前端开发的极速体验”和“新生态的探索”。

Vue官方还在开发一个新的工具叫create-vue，它是一个更轻量级的Vue3项目创建工具，默认用Vite作为构建工具，不需要全局安装，直接用npm init vue@latest命令就能创建项目，不过create-vue的定制化能力不如Vue3 CLI，适合快速创建轻量级的Vue3新项目，而Vue3 CLI还是适合企业级项目和需要大量定制化配置的项目。

不管是Vue3 CLI、Vite还是create-vue，都是Vue官方为了方便开发者开发Vue3项目而推出的工具，你只需要根据自己的项目需求和团队情况选择合适的工具就行，不用盲目跟风。