一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
前言
上一章我们完成了基本的代码编写规范和代码提交规范，那我们平时除了这些是否还需要其他辅助呢？
项目环境区分
我们前端日常开发中对于系统环境可是老熟人了，那我们在开发过程中如果不区分环境变量的话在打包提交测试的时候就知道有多麻烦了，那对系统环境变量做隔离就是非常必要的了，无论是在webpack中还是在vite中.env.开头的文件都会被识别为系统环境配置文件。我们根据需要将环境区分为开发环境development，测试环境staging，生产环境production。那具体的内容该怎么写呢，在vite中和webpack有了区分，具体可以参考vite官方文档环境变量和模式。既然区分环境则需要我们创建三个新的文件：
.env.development
NODE_ENV=development
VITE_APP_PORT = '8000' // 端口号
VITE_APP_HOST = '0.0.0.0' //自定义host
VITE_APP_MOCK_API = 'http://0.0.0.0:8000/'
VITE_APP_API = ''
.env.staging
NODE_ENV=staging
VITE_APP_API = ''
.env.production
NODE_ENV=production
VITE_APP_API = ''
这里我们需要注意的是必须以vite_开头的变量才是有效定义被vite识别，细心的小伙伴可能会发现我们在开发环境中多了一些变量，接下来就是这些变量发挥作用的时候了。
vite配置
vite自带的vite.config.js文件如果不管它好像也没啥大问题，不过，生命贵在折腾，我们怎么能放过呢。在文件自带的内容中只有寥寥几笔，一个是从vite中到处defineConfig，一个是导出vue插件。那我们首先分析一下我们需要在项目中需要使用到哪些功能。
文件引入
文件引入可能是我们最常用的了，在我们刚踏入前端的时候都知道根据相对路径去引入一个文件，最直接的就是初始化项目中App.vue中引入的HellowWorld了
可以看到这个组件就是通过相对路径去引入使用，那我们如果路径层级比较深又怎么办呢？难道一直../../去查找吗？那也太傻了嘿嘿嘿。好在无论是webpack还是vite都提供了路径解析器，这里要感谢前人赏饭吃。首先我们还是引入path
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
有的人可能会问不是说vite不能用require了吗，这里大家可能陷入了一个误区，vite不支持require是在页面渲染的时候，而我们的配置文件作用是在项目构建的过程中，是可以使用的哦。
mock数据
虽然我们前端需要和后端配合，但是没有后端我们也可以请求数据，那就是我们的mock数据了，在本次项目中我们就会使用mock，首先我们需要安装vite-plugin-mock
npm i vite-plugin-mock -D
然后从vite-plugin-mock中导出viteMockServe
引入公共样式
在日常开发中，会发现有很多样式代码其实是重复的，可能只是一些参数的变化或者压根可以直接复制不用修改，包括可能产品需要切换主题色，切换字体大小，那如何解决这些问题呢。那就是引入公共样式。有很多方法可以引入公共样式，这里只介绍两种，一种是在App.vue中直接把定义好的样式文件在style标签中引入，第二种是在vite配置文件中引入。这里还是推荐使用第二种。别问为什么，问就是喜欢。
配置跨域代理
我们知道如果直接去请求接口会出现跨域的问题，常见的跨域解决方案我就不在这里说了，感兴趣的话自行谷歌。我们需要在vite中配置serve代理
加载环境变量
我们在前面说了定义环境变量，那我们定义好环境变量如果不去引入的话也没有用的啊。
打包清除console和debugger
我们开发过程中避免不了写大量的console，那这些数据是不能发到线上给用户看到的，如果我们一个个去删除的话很麻烦，再者想要看数据的时候又要写，所以就诞生了插件rollup-plugin-uglify，同样的我们从插件中导出uglify
综上所述，我们的配置所需大概就理清楚了，这里把部分代码贴出：
有需要全部代码的可以评论区找我哦。
