# 一、背景与问题
无论你是新手还是大佬,我们都知道任何一个项目至少有三个环境:本地环境、测试环境、生产(线上)环境。
但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'
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'
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
2
3
# 联系我们
1024创新实验室-主任:卓大 (opens new window),混迹于各个技术圈,研究过计算机,熟悉点 java,略懂点前端。
1024创新实验室(河南·洛阳) (opens new window) 致力于成为中原领先、国内一流的技术团队,以技术创新为驱动,合作各类项目(软件外包、技术顾问、培训等等)。
![]() | ![]() | ![]() |
加 主任 “卓大” 微信 拉你入群,一起学习 | 关注 “小镇程序员” 分享代码与生活、技术与赚钱 | 请 “1024创新实验室” 喝咖啡 支持我们的开源与分享 |