基础
依据 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` // ...
优点
无需再担心客户端各种缓存各种坑
缺点
每次都需要再次编译 (这都不是事, 强烈推荐此种方式.)