前端项目环境变量的两种配置方法

[qiuhongbingo]

本文以 vue-cli 项目作为 demo 示例

方法一

借助 proxy 代理服务器地址，这种方式的优缺

• 优：不会造成浏览器跨域 CORS
• 缺：配置繁琐，线上部署可能需要配合 nginx

配置方法

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api/v1': {
        target: 'https://api1.com',
        changeOrigin: true
      }
    }
  }
}

methods: {
  async fetch() {
    await this.$axios.get('/api/v1/xxx')
  }
}

server {
  location /api/v1 {
    proxy_pass https://api2.com;
  }
}

方法二

借助 env 定义并直连服务器地址，这种方式的优缺

• 优：配置简单
• 缺：会造成浏览器跨域 CORS，需要后端允许跨域

配置方法

首先定义好需要的环境文件，一般都是三个环境

1. 开发环境 .env.development

NODE_ENV = development
VUE_APP_API = 'https://beta.api1.com/api/v1'

2. 生成环境 .env.production

NODE_ENV = production
VUE_APP_API = 'https://prod.api1.com/api/v1'

3. 测试环境 .env.staging

staging 这里我用的 production 来构建打包，然后连的 beta 服务器地址

NODE_ENV = production
VUE_APP_API = 'https://beta.api1.com/api/v1'

methods: {
  async fetch() {
    await this.$axios.get(process.env.VUE_APP_API + '/xxx')
  }
}

启动命令可以增加个 build-beta 方便执行

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "build-beta": "vue-cli-service build --mode staging"
}