Vue开发环境和生产环境的代理配置

(1)在vue项目中有两个关键的环境配置文件：

• .env.development
• .env.production

(2)一个表示开发环境，一个表示生产环境，建议在项目搭建初期就创建好这两个文件

开发环境配置：

.env.development配置

VUE_APP_BASE_URL=/api

其中VUE_APP_BASE_API是Vue的关键后端请求地址，我们可以在nodejs项目的任意js代码中获取环境变量，例如在创建axios请求实例对象时，通过process.env.“环境变量的KEY”

(3)对于开发环境的地址配置我们是可以在vue.config.js中直接配置代理方式的，这里的代理是对请求路径的代理，也就是axios的请求路径（简单点理解就是对路径进行替换），例如以下代码，我们将/api这个路径代理到了target指向的真实的后端地址。但是要注意此处的用法仅限于开发环境，也就是npm run运行的场景，对生产环境是无效的。

module.exports = {
  // 1.配置方式一: CLI提供的属性
  outputDir: './build',
  // publicPath: './',
  devServer: { //这里都是配置开发环境参数
    proxy: {  //设置开发环境代理
      '^/api': {  //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
        target: '接口地址', //代理的目标地址(后端设置的端口号)
        pathRewrite: { // 重定向
          '^/api': ''
        },
        changeOrigin: true  //是否设置同源，输入是的
      }
    }
  },

(4)生产环境配置：

下面介绍生产环境的配置，生产环境其实就是我们通过npm build出来的包，有一个index.html的网页入口。贴一下生产环境的配置：

.env.production配置

VUE_APP_BASE_URL=接口地址/api

(5)最后在request的文件中写上引用的地址

const BASE_URL = process.env.VUE_APP_BASE_URL
const TIME_OUT = 10000

export { BASE_URL, TIME_OUT }