nuxt.js 请求域名变量

1.每个项目都会有 dev sit uat prd等环境 , 环境的不同导致请求域需要变动,那怎么设置动态域名呢? 首先 我们假设有这样一个域名可以使用, 那怎么配置到项目里面使用呢? 现在, 我们先按照官方文档生成一个Nuxt.js项目,然后手动生成文件夹 plugins/fetch.js, 示例如下

// fetch.js
import { Loading } from 'element-ui'
import { BASE_URL } from './static'  // BASE_URL为假定的环境变量名,稍后会详细讲解

// 请求时过渡UI
let loading

const fetch = new Fetch({
  // 发出请求时,绑定环境变量到 
  baseURL: BASE_URL,
  beforeRequest (config) {
    if (config.showLoading) {
      // 开启过渡UI
      loading = Loading.service()
    }
  },
  beforeResponse (data, config) {
    // 过渡UI关闭
    loading && loading.close()
    let res = data.data
    // 请求出错
    if (res.status === -1) {
      Message({ message: res.message, type: 'warning' })
      throw res.message
    }
  },
  responseError (e) {
    loading && loading.close()
    Message({ message: e.message, type: 'warning' })
  }
})

Vue.use(fetch)

2. 为了识别dev sit uat prd等环境,我们需要看 BASE_URL是 怎么生成的 , 在nuxt官方文档里,我们找到对这个变量的定义:

 Nuxt使用webpack的definePlugin来定义环境变量。这意味着Node.js中的process或process.env既不可用也不能定义。nuxt.config.js中定义的每个env属性都单独映射到process.env.xxxx并在编译期间进行转换编译。

3. 接下来根据文档,展示配置过程:

// ./static生产环境

export const IS_PRO = process.env.NODE_ENV === 'production' // 生产环境
export const BASE_URL = (function () {

  const API_HOST = 'https://XXX-api.xxx.net.cn'
  switch (true) {
    // 如非开发环境或者UAT
    case !IS_PRO:
      return 'http://127.0.0.1:7001'  // 本地
    case host === 'XXX-uat.xxx.net.cn':
      return `${API_HOST}:3003`
    // 正式环境
    case host === 'itapp.xxx.net.cn':
      return `${API_HOST}:3004`
    default:
      return `/api` // 自定义
  }
})()