SmartAdmin | 1024创新实验室

Appearance

一、背景与问题 ​

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

js
NODE_ENV=development
VITE_APP_TITLE='SmartAdmin 本地环境(Local)'
VITE_APP_API_URL='http://127.0.0.1:1024'

3.2、dev环境 ​

有一群前端开发者，不愿意像上面那两种人麻烦，他们坐等后端的api接口，那么就只能连接后端dev环境的地址了，所以有了：

启动命令：npm run localhost，配置文件.env.development文件：

js
NODE_ENV=development
VITE_APP_TITLE='SmartAdmin 开发环境(Dev)'
VITE_APP_API_URL='http://127.0.0.1:1024'

3.3、test/pre/prod环境 ​

测试、预发布、生产环境，这三个环境不多说了，大家都懂的；
具体配置文件：.env.test、.env.pre、.env.prod;

执行命令如下:

js
打包 测试环境：    npm run build:test
打包 预发布环境：   npm run build:pre
打包 生产环境：    npm run build:prod

联系我们 ​

1024创新实验室-主任：卓大，混迹于各个技术圈，研究过计算机，熟悉点 java，略懂点前端。
1024创新实验室（河南·洛阳） 致力于成为中原领先、国内一流的技术团队，以技术创新为驱动，合作各类项目（软件外包、技术顾问、培训等等）。

加微信： 卓大
拉你入群，一起学习		 公众号 ：六边形工程师
分享：赚钱、代码、生活		请 “1024创新实验室”
“烩面里加肉”
“ 咖啡配胡辣汤,提神又饱腹”		抖音 : 六边形工程师
直播：赚钱、代码、中医

阅读量：