vue cli 环境变量 -- env

前言：

杭州疫情过年回不去啦，给自己充充电。

什么是 vue cli 环境变量？

在项目开发中，我们的项目代码会经历以下阶段：开发阶段 => 测试阶段 => 生产阶段(哈哈这个箭头让我有种写箭头函数的快感），在不同的阶段下，所需运行的代码可能也是不同的，如在开发阶段变为生产阶段打包时，我们需要将接口地址改为线上地址,阶段变化时又要手动切换不同的地址，显然十分的麻烦。vue cli的环境变量帮我们解决了这个问题。他在不同的开发阶段对应着不通的运行环境(也可以自定义设置环境，这里先不深挖）默认情况下分别为：开发环境（mode development），测试环境（test），生产环境（mode production）。

不同环境下运行的文件：

我们可以手动创建这两个文件，文件中的变量我们称为环境变量。在开发阶段(npm run serve)和生产阶段打包时(npm run build)，webpack会自动读取对应的文件，妈妈再也不用担心我频繁的修改api接口啦。

.env.development文件的代码示例

# 开发变量配置，默认的键值对NODE_ENV = development和BASE_URL: "/"
# 3.0版本配置要求自定义键值对名以VUE_APP_XXXX否则不会被识别，无法使用
# 修改配置文件，请重启生效
# 演示环境：http://192.168.1.44:8026/dcpm
# 测试环境：http://192.168.1.30:8026/dcpm

# 服务器请求地址
# VUE_APP_API_BASE_URL = http://192.168.1.44:8026/dcpm
VUE_APP_API_BASE_URL = http://192.168.1.50:8026/dcpm

###### AES加解密 #####
# 秘钥
VUE_APP_AES_SECRET_KEY = interaction2020g
# 秘钥偏移量
VUE_APP_AES_SECRET_IV = initializationiv

.env.production文件的代码示例

# 生产变量配置，默认的键值对NODE_ENV = production和BASE_URL: "/"
# 3.0版本配置要求自定义键值对名以VUE_APP_XXXX否则不会被识别，无法使用
# 修改配置文件，请重启生效
# 演示环境：http://192.168.1.44:8026/dcpm
# 测试环境：http://192.168.1.30:8026/dcpm

# 服务器请求地址
# VUE_APP_API_BASE_URL = http://192.168.1.44:8026/dcpm
VUE_APP_API_BASE_URL = http://192.168.1.50:8026/dcpm


###### AES加解密 #####
# 秘钥
VUE_APP_AES_SECRET_KEY = interaction2020g
# 秘钥偏移量
VUE_APP_AES_SECRET_IV = initializationiv

怎么去使用？

可以直接通过process.env.VUE_APP_API_BASE_URL 拿到不同环境文件下的api地址。并在创造axios实例时，赋值给我们的baseURL。

// config.js
serverConfig = {
  title: '数字化项目协同平台',
  serverConfig: {
    // 服务器请求地址
    VUE_APP_API_BASE_URL: process.env.VUE_APP_API_BASE_URL,

    // 文件预览地址
    VUE_APP_FILE_PREVIEW_URL: process.env.VUE_APP_FILE_PREVIEW_URL,

    // scoket连接地址
    WebSocket_URL: process.env.VUE_APP_WEBSOCKET_URL,

    // 平台管理跳转地址
    VUE_APP_PLATFORM_MANAGE_URL: process.env.VUE_APP_PLATFORM_MANAGE_URL
  }
}

Vue.prototype.$configApiUrl = serverConfig

// request.js

// request拦截器
service.interceptors.request.use(
  config => {
    config = {
        ...config,
        baseURL: vm.$configApiUrl.VUE_APP_API_BASE_URL
      }
    return config
 }

)