# vue项目配置系统变量

vue项目可以根据不同环境配置不同的环境变量，然后进行打包。这是正常的处理方式，但是有时需要在不覆盖线上版本的情况下，实现部分变量变化。如果不配置一个优先级更高的全局变量，那就无法做到。因此在项目上配置一个优先级比环境变量更高的变量显得尤为重要。

# 需求背景

1. 好比项目接口使用了加密处理，对于某个接口的报错，由于数据进行了加密，无法查看是否是接口返回数据出现问题导致

2. 项目需要部署到十多种甚至几十种不同baseUrl的情况下，得打包很多次。配置了优先级更高的全局变量后，只需进行配置即可。

# 开始

在public文件夹下新建一个 static文件夹

在static文件夹下新建一个 config.js 文件内容如下环境变量上有的变量通通可以在这里也定义一个

window.configObj = {
  baseUrl: "", //请求基础路径
  timeout: "", //请求超时时间
  tokenKey: "", //cookie键名
  dynamicRoute: "", //动态加载路由  "1" 是  "0" 否
  encryption: "" //接口是否加密配置 "1" 是  "0" 否
}

在index.html 文件下引入 config.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="./static/config.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

在需要用到环境变量的地方进行判断，如果在config.js文件下有值的变量优先使用config.js的变量值。如下

// 系统配置 是否 加密
const encryption = window.configObj.encryption || process.env.VUE_APP_ENCRYPTION 

// 创建axios实例
const service = axios.create({
  baseURL: window.configObj.baseUrl || process.env.VUE_APP_BASE_URL,
  timeout: window.configObj.timeout || process.env.VUE_APP_TIME_OUT // 请求超时时间
})

至此就ok了，打包后如需修改，仅需在 config上配置即可。

# 总结

经过上述步骤，即可轻松在打包后仍可轻松改变环境变量，无需重新打包。当然现在基本上不是人工打包部署，大多数使用Jenkins部署，一键部署也很轻松。总之，知此方法有益无害，偶尔可能会用到，所以项目可以提前做好此配置，有备无患。如有问题，微信公众号【爆米花小布】反馈，阿里嘎多。

阅读原文 (opens new window)

← vue项目的模式和环境变量 vue项目axios请求优化（一） →