携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情
这是大厂企业级项目架构系列的第三篇，这系列的文章如下：
之前的文章详细讲解了如何接入代码和提交规范，其实这些对我们项目的最终构建结果影响都不算大，目前已经完成的内容如下，如果有不清楚的，可以点上面的链接看相关内容。
- 首先是技术选型，比如框架选型（Vue|React等），构建工具，包管理工具等等。
- 代码规范，提交规范
- 环境区分，包括开发、测试、生产的构建区分等
- 样式方案，图标方案，布局方案，组件库等
- 基础能力，包括路由、状态管理、持久化、网络请求等
- mock方案
- 根据自身的业务类型来封装相应的公共模块
- 单元测试
- 自动化构建部署
- ....
从这篇文章开始正式进入正题，接下来的内容都是会对我们项目最终的构建结果产生影响的。本篇先讲解vite的基础配置以及如何区分环境构建和开发。
为什么用vite
毫无疑问，vite是当下最热门和最高效的前端构建工具之一。
从开发角度来讲，相较于传统老大哥webpack，vite大大地提高了开发体验和效率。不管是冷启动还是热更新，vite都比webpack快上不少。因为webpack必须对整个工程进行构建后才能启动，而vite借助浏览器原生支持的ESM，使得源码在真正被使用时才做处理。而对于项目依赖，vite使用esbuild进行与构建，同样比js编写的打包器快上很多。
而从生产的角度来讲，vite使用rollup进行生产的构建打包，同样可以像webpack一样配合babel等工具使用，对于构建出来的生产包质量是可以信赖的。
当然webpack依然是最流行的构建工具，生态完善，有各种各样的插件、loader，对于生产的构建仍然还是比vite有优势的，毕竟生产环境我们要求稳，确保质量。所以有很多人也会用vite做开发构建，用webpack做生产打包
最后，我们作为一个新项目，没有什么负担和迁移成本，而且只要测试做的足够充分，同样可以保证线上的质量，所以大胆上vite吧。
开始配置
我不会从头到尾介绍一遍vite是如何使用的，这些都可以在vite官网上自行查阅。也不会一开始就把vite配置的很完整，因为项目刚开始，后面可能会遇到各种业务场景，会根据需要做相应的调整和配置。这里只做较为通用和基础的配置。
通过脚手架生成的vite配置只有以下短短几行，虽然本身vite已经内置支持了很多特性，可以开箱即用，但是还不足以应对后续日益复杂的项目，我们需要增加一些基础配置。
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});
复制代码