不同环境配置和打包

11/7/2022

# 一、背景与问题

无论你是新手还是大佬,我们都知道任何一个项目至少有三个环境:本地环境、测试环境、生产(线上)环境。
但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

# 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

# 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

# 联系我们

1024创新实验室-主任:卓大 (opens new window),混迹于各个技术圈,研究过计算机,熟悉点 java,略懂点前端。
1024创新实验室(河南·洛阳) (opens new window) 致力于成为中原领先、国内一流的技术团队,以技术创新为驱动,合作各类项目。

加 主任 “卓大” 微信
拉你入群,一起学习
关注 “小镇程序员”
分享代码与生活、技术与赚钱
请 “1024创新实验室” 喝咖啡
支持我们的开源与分享
告白气球 (钢琴版)
JESSE T