env.js统一管理环境变量

一、前言

最近工作比较繁忙，主要也是因为旧项目环境变量东一块西一块的用，用法和判断都不同，改起来很废时间，因此小更一期env.js，目的是为了统一管理，方便后续的开发。

二、环境变量

1、为什么要有环境变量

实际项目过程中，开发环境，测试环境，生产环境各不相同，各有用处，而且基本是服务端地址修改，类似这类配置，我们是需要放到环境变量中的，这样也方便测试部署的同事，能直接修改，不需要再来麻烦我们前端。

2、 举个例子

下图是两个.env文件，development代表开发环境，production代表生产环境，打包命令也不一样，是在package.json配置的

这些只是前言，知道了有这些文件，那怎么样才能方便并且准确读到当前环境的对应变量呢？

我先说旧项目的情况，因为是多人开发，所以有在mian.js里有这种根据变量标志符process.env.VUE_APP_NODE_ENV，判断当前环境变量值的

也有在项目文件里用process.env直接读取的

上述方式都可以获取到对应变量，但是管理上不够简便，每次要修改，就有可能改漏某处地方，同时因为是环境变量，写在了.env配置文件里，没办法直接在实际环境修改，必须修改完后重新打包部署，过程比较繁琐。

而且按照官方文档，.env文件里的变量，都是要以VUE_APP开头，才能被读取到（我因为是半路出家进前端寺，以为process.env.ENV就能读到值，洋洋洒洒写完代码就提交了，结果被毒打一顿）

因此我是用了baseUrl.js、config.js 和 env.js三个文件来解决上述两个问题的。

文件位置如下

baseUrl.js和config.js 存放变量一致，一个是开发环境用，一个是实际环境用，可以直接修改，无需重新打包， env统一管理这些变量，统一抛出最终值。

3、使用过程

首先创建baseUrl.js，位置随意，但建议和main.js放同级，变量可根据需要自行增加。

module.exports = {
  // [重要]  此处为开发环境配置, 非开发人员请勿修改
  // [重要]  线上环境 请到config.js下配置(一一对应),地址如下:
  // [重要] project
  //          |-- public
  //                |-- config
  //                      |-- config.js

  AlarmPath: '88.88.88.88:9090', // 接口地址
  AlarmApi: '/alarmApi/', // 接口api前缀
}
复制代码

其次在public文件夹下创建config.js文件，在public下，才能在打包部署之后，也能修改配置, 同时这里需要抛出window全局变量。

//全局配置项
(function (window) {
  window.globalConfig = {
    //[重要] 此处的配置和 baseUrl.js中 的配置一致 ,打包后的环境请在此处修改
    AlarmPath: '99.99.99.99:9052', // 接口地址
    AlarmApi: '/alarmApi-prod/', // 接口api前缀
  }
})(window)

复制代码

最后创建env.js来统一管理

const basePath = require('./baseUrl.js')
const NODE_ENV = process.env.VUE_APP_NODE_ENV
// 优先级判断，development环境，则优先启用baseUrl.js，否则启用config.js，
// 为确保必有值，如空值则baseUrl.js会垫底
export default {
  // 服务地址
  AlarmPath: NODE_ENV === 'development' ? basePath.AlarmPath
    : window.globalConfig.AlarmPath
      ? window.globalConfig.AlarmPath
      : basePath.AlarmPath,
  // 接口前缀
  AlarmApi: NODE_ENV === 'development' ? basePath.AlarmApi
    : window.globalConfig.AlarmApi
      ? window.globalConfig.AlarmApi
      : basePath.AlarmApi,
}
复制代码

并在main.js里补上下面两句话，全局抛出变量

 import env from '@/env'
 
 Vue.prototype.$env = env
复制代码

这样就可以在项目里，能用this指向的地方，直接用this.$env访问到上述对象了，访问的时候变量名还简洁（再也不用process.env.VUE_APP_啥啥的）

三、 小结

最后补一句，实际开发过程中，类似本文的这种情况很多，我还是建议大家对于这种公共的部分，尽量独立出来单独统一管理，四处分散只会给自己埋坑。

ps： 浅浅水一波

作者：地霊殿__三無
链接：https://juejin.cn/post/7133033002216456228
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。