1024创新实验室-公告

助力抖音1000个粉丝，开播写代码🎉🎉

打开【抖音APP】-点击【左上角侧边栏】-【点击扫一扫】-【进行关注】🎉🎉

和1024创新实验室一起，热爱代码，热爱生活，永远年轻，永远前行🎉🎉

打赏
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创新实验室 致力于成为中原领先、国内一流的技术团队， 以AI+数字化为驱动，用技术为产业互联网提供无限可能， 业务如下:
  • 教育领域（高职院校数字化、就业创业大数据平台、继续教育平台；在线教育系统、视频直播、题库等，包含：医学、应急管理、成考、专升本等）
  • 供应链领域（网络货运平台、大宗贸易进销存ERP、物流管理TMS、B2B电商、仓储WMS、AI提效等）
  • 中医领域（诊所数字化管理、互联网医院、AI辅助诊疗、中医适宜技术、在线云问诊、空中药房等）
  • AI+软件领域（软件定制外包、开源技术、数据大屏、国产化改造、技术升级换代、人员外包、技术顾问、技术培训等）
加微信： 卓大
拉你入群，一起学习		 公众号 ：六边形工程师
分享：赚钱、代码、生活		请 “1024创新实验室”
烩面里加肉
咖啡配胡辣汤,提神又饱腹		抖音 : 六边形工程师
直播：赚钱、代码、中医

阅读量：