# 一、背景与问题
无论你是新手还是大佬，我们都知道任何一个项目至少有三个环境：本地环境、测试环境、生产（线上）环境。
但nodejs默认环境有两个:development和production，是完全不够的。
笔者认为前端的项目都应该有以下五个环境:
- 本地环境（localhost,用于本地开发，连接本地api）
- 开发环境（dev,用于本地开发，连接开发环境的api）
- 测试环境（test，测试人员测试）
- 预发布环境（pre, 真实的数据，最真实的生产环境）
- 生产环境（prod, 生产环境）
# 二、架构思想
为了满足多个环境，我们需要利用vite3的env多环境配置import.meta.env 来解决
- 1、我们需要加配置环境的文件
- 2、将多环境文件内容注入到系统中
# 三、五个环境讲解
# 3.1、localhost环境
很少有项目关注这个环境，希望能仔细阅读，会对你有很大的帮助。
有那么两群人：
- 1 纯前端，不会后端，但在对接api的时候，喜欢把后端代码pull下来，在本地运行，然后连接本地的api
- 2 全栈开发者，他们即开发前端页面，又写后端api接口
讲到这里相信大家应该都懂了localhost的环境的样子了，就是连接的本地的api地址
localhost环境配置文件：
启动命令：npm run localhost，配置文件.env.localhost文件：
VITE_APP_API_URL = 'http://127.0.0.1:1024'
VITE_APP_PROJECT_TITLE = 'SmartAdmin 本地环境(Localhost)'
VITE_APP_PROFILE = 'local'
VITE_APP_MODE = 'local'
1
2
3
4
2
3
4
# 3.2、dev环境
有一群前端开发者，愿意像上面那两种人麻烦，他们坐等后端的api接口，那么就只能连接后端dev环境的地址了，所以有了：
启动命令：npm run localhost，配置文件.env.development文件：
VITE_APP_API_URL = 'http://192.168.1.188:1024'
VITE_APP_PROJECT_TITLE = 'SmartAdmin 开发环境(Dev)'
VITE_APP_PROFILE = 'dev'
VITE_APP_MODE = 'development'
1
2
3
4
2
3
4
# 3.3、test/pre/prod环境
测试、预发布、生产环境，这三个环境不多说了，大家都懂的；
具体配置文件：.env.test、.env.pre、.env.prod;
执行命令如下:
打包 测试环境： npm run build:test
打包 预发布环境： npm run build:pre
打包 生产环境： npm run build:prod
1
2
3
2
3
# 联系我们
1024创新实验室-主任：卓大 (opens new window)，混迹于各个技术圈，研究过计算机，熟悉点 java，略懂点前端。
1024创新实验室（河南·洛阳） (opens new window) 致力于成为中原领先、国内一流的技术团队，以技术创新为驱动，合作各类项目（软件外包、技术顾问、培训等等）。
 |  |  |
| 加 主任 “卓大” 微信 拉你入群，一起学习 | 关注 “小镇程序员” 分享代码与生活、技术与赚钱 | 请 “1024创新实验室” 喝咖啡 支持我们的开源与分享 |
