前言
在前端开发中，Vue.js 算是一个很受欢迎的框架，而 Vue.js 更是一个非常灵活的框架，他能够适应不同的需求和场合，也因此在使用中会有一些工具会被广泛用到，其中 vue-cli 就是其中的一样，用来规范化 Vue.js 项目的自动化构建工具，负责项目基本文件结构、webpack 配置以及诸如 eslint、babel、jest、webpack-dev-server 等基本功能的封装。
近来，vue-cli 推出了新的版本 —— vue-cli@3，作为 vue-cli@2 的后续版本，vue-cli@3 能否带来更多的优势，那么他们之间有什么区别和异同呢？本文将对他们进行详细对比，并指导 vue-cli@2 升级至 vue-cli@3。
vue-cli2.0 与 vue-cli3.0 对比
项目结构
- vue-cli@2：采用客户端方式搭建，采用 default and custom 模式，让你可以根据不同的需求选择相应的模板来创建项目，文件结构相对相对简单。
-- -------------------- ---- ------- - ----- - ------ - ------------ - --- - ------ - ---- - -------- - ------------- - ------------- - --------- - ---------- - ------------- - ---------- - ------------ - ---------
- vue-cli@3：采用服务端渲染方式创建项目，同时采用 presets 和 plugin 的方式让你能够自由的组合不同的模块来创建不同功能的项目，文件结构更加规范，同时原先 config 文件夹下的配置文件被集成到了 vue.config.js 中，更加方便。
-- -------------------- ---- ------- - ------------ - ------ - --- - --------------- - ------------ - ---------- - --------------- - ------------ - --------- - -------------
webpack 配置
vue-cli@2：使用了基于 gulp 和 webpack 的基础构建工具，封装的较为完整，但如果你需要对其进行修改就需要深入的去了解其内部实现，有一定门槛。
vue-cli@3：使用 webpack-chain 把 webpack 配置封装成了一个链式 API，可以灵活生成所需配置文件，简化了开发人员的需求，让他们不再需要了解构建工具的内部实现，同样也可以使用命令 vue inspect 或者 vue ui 进行修改，使用起来更加灵活。
最佳实践
vue-cli@2：采用默认设置和扩展脚手架基础配置，对于一般的项目应该可以满足，但对于高端定制的应用来说可能会受到一定的限制。
vue-cli@3：采用预设，让开发人员可以很方便的生成适合不同需要的定义模板，方便团队协作。
vue-cli@2 升级 3 webpack
准备升级之前，我们需要先备份我们的代码，如果您使用的 Git 进行版本控制，则请提交现有代码。
接下来，我们需要安装新版 vue-cli，使用全局安装命令 npm 或者 yarn：
npm install -g @vue/cli
yarn global add @vue/cli
- 如果需要迁移，使用以下命令进行升级：
vue upgrade
- 或者使用以下命令，默认升级到最新版：
vue upgrade --next
- 执行完成后，我们就得到了一个基于 vue-cli@3 的项目，我们可以通过以下命令查看其版本：
vue --version
- 此时，我们可以通过将旧项目中的 src 和 static 文件夹及根目录中的 index.html 文件复制到新项目中来实现旧项目的迁移，同时还需要注释掉旧项目中的 build 文件夹。至此，我们就完成了一次 vue-cli@2 升级至 vue-cli@3 的流程。
结语
通过了解 vue-cli@2 和 vue-cli@3 之间的区别，我们可以发现 vue-cli@3 在项目结构、webpack 配置、最佳实践等方面与 vue-cli@2 有了非常大的改进，同时 vue-cli@3 也让项目的维护和升级变得更加简单和灵活。
通过以上的介绍，我们可以看到仅仅是升级到vue-cli3.0这样的工具，可以为我们的开发生态和团队升级带来很好的效果和帮助。因此，我们建议大家在实际项目开发中采用新的 vue-cli@3 来进行开发和维护，这不仅可以让我们更好的进行前端开发，同时也可以让开发更加高效和有保障。
示例代码：无。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ce652ae46428fe9e898222
