基础
依据 process.env.NODE_ENV 动态的进行 production || development 间环境的切换等
什么是环境
产品从开发 ---> 上线, 期间会经历:
- 开发阶段
- 系统测试(ST)
- 用户测试(UAT)
- 发布BETA
- 灰度测试
- 正式上线
正式上线之前, 均为 开发环境, 即为 development
正式上线之后, 均为 生产环境, 即为 production
Development
在此阶段, 我们需要定位 BUG、DEBUG, 并且还需要对接服务端的测试环境
Production
在此阶段, 我们需要让静态文件尽可能的小, 加载速度尽可能的快, 并且还需要对接服务端的生成环境
动态切换环境变量
- env.js
我们将环境变量写入至 Javascript 文件中, 并忽略对该文件的版本控制追踪.
即可确保本地与服务器上配置互不干扰.
优点
不需要再次编译, 若服务端项目迁移或更换域名, 不论后端还是运维人员均可自行设置相关属性
缺点
此做法虽然可以达到目的, 但是由于 Javascript 文件会被浏览器缓存, 因此无法做到即时更新. (可以加入版本号, 让浏览器主动刷新缓存)
// touch env.js
// 通过为 window 对象设置环境变量属性
window.EOS_ENV = {
"ums_baseURL": "http://192.168.1.81:7001",
"eos_baseURL": "http://localhost:8542"
}
<!-- 在 script 标签中引入 env.js, 注意需要引入在最前, 建议放在 <head> 中 -->
<head>
<!-- BAD -->
<script src="env.js"></script>
<!-- GOOD -->
<script src="env.js?v=1.0.0"></script>
</head>
<body>
<script src="bundle.js"></script>
</body>
// bundle.js
// 在我们的业务代码中, 可以直接通过 window 对象将其取出拼接 API URL
const ums_baseURL = window.EOS_ENV.ums_baseURL
const eos_baseURL = window.EOS_ENV.eos_baseURL
const ums_login_api = `${ums_baseURL}/auth/login`
const eos_products_api = `${eos_baseURL}/products`
// ...
- process.env.NODE_ENV
通过 Nodejs 环境变量, 在编译时, 动态的设置环境变量属性
// touch ./envs/index.js export const eos_baseURL = process.env.NODE_ENV === "production" ? "http://prod.eos.gvt.com" : "http://localhost:8541" export const ums_baseURL = process.env.NODE_ENV === "production" ? "http://prod.ums.gvt.com" : "http://192.168.1.81:7001"
// bundle.js
import * as envs from "./envs"
const ums_login_api = `${envs.ums_baseURL}/auth/login`
const eos_products_api = `${envs.eos_baseURL}/products`
// ...
优点
无需再担心客户端各种缓存各种坑
缺点
每次都需要再次编译 (这都不是事, 强烈推荐此种方式.)