ElementUI 01 - 环境变量文件说明

前言

在通过Vue+Element进行项目开发时，比如新建一个工程页面，除了要配置路由信息外，环境变量的配置也会触及。

环境变量文件(三种)

在Vue官网有关模式和环境变量的介绍中，有如下一段说明：

简单说明：

• .env.development 模式用于serve，开发环境。
• .env.test 测试环境。
• .env.production模式用于build，线上环境。

环境变量文件具体说明

文件位置 - 项目根目录下

截图与上面介绍不同的是，当前项目测试环境变量文件命名为'env.staging'.

文件内容介绍

以env.development文件为例，

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'
VUE_APP_SYSADMIN_API ='/dev-api/sysadmin'
VUE_APP_SOFTWARE_TEST_API = '/dev-api/software_test'
VUE_APP_MATERIAL_MANAGER ='/dev-api/material_mng'

注意：

1. 环境文件只包含环境变量的“键=值”对；
2. 环境变量必须以VUE_APP_为开头；
3. 获取方式：console.log(process.env.VUE_APP_xxx)

文件依赖介绍 - vue.config.js

如上面接入，在项目的根目录下有文件vue.config.js。如果初始项目中不存在此文件，可自己创建。

在vue.config.js文件里面配置各个接口的请求代理，可参考Vue-cli的devServer.proxy介绍，目前项目中使用情况截图如下：

devServer: {
  port: port,
  open: true,
  overlay: {
    warnings: false,
    errors: true
  },
  proxy: {
    [process.env.VUE_APP_SYSADMIN_API]: {
      target: `http://10.10.10.10:2100/`,
      changeOrigin: true,
      pathRewrite: {
        ['^' + process.env.VUE_APP_SYSADMIN_API]: ''
      }
    },
    [process.env.VUE_APP_SOFTWARE_TEST_API]: {
      target: `http://10.13.10.10:3100/`,
      changeOrigin: true,
      pathRewrite: {
        ['^' + process.env.VUE_APP_SOFTWARE_TEST_API]: ''
      }
    },
    [process.env.VUE_APP_MATERIAL_MANAGER]: {
      target: `http://10.14.10.10:3200/`,
      changeOrigin: true,
      pathRewrite: {
        ['^' + process.env.VUE_APP_MATERIAL_MANAGER]: ''
      }
    }
  }

异步请求配置

src/api/xxxx.js下通过axios配置异步请求。

import request from '@/utils/request'

const api = '/materialRegistration/list/page'

export function getOrderRequest(params) {
  return request({
    url: api,
    baseURL: process.env.VUE_APP_MATERIAL_MANAGER,
    method: 'post',
    params
  })
}

在组件中，可import 'getOrderRequest', 调用此方法时，可通过传入对象数据组件query类型路由:

const param = {
  "pageSize": this.listQuery.page_size,
  "pageNum": this.listQuery.page_number
}
getOrderMaterialRequest(param).then(res => {
  console.log(res)
})

在进行网络请求时，实际的路由会进行拼接处理，包含'process.env.VUE_APP_MATERIAL_MANAGER' + 'api' + '传入的query信息'。页面可通过F12观察Network的Headers信息。