Lei Zhang

时光已逝永不回,
往事只能回味。
... ...
春风又吹红了花蕊,
你已经也添了新岁。

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 96%



gvt salon 06 环境变量

2018-09-14 » 没填完的坑 / Tutorial , Vuejs , 环境搭建

基础

依据 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`

// ...

优点

无需再担心客户端各种缓存各种坑

缺点

每次都需要再次编译 (这都不是事, 强烈推荐此种方式.)

展开选填信息