终于搞懂Vue开发环境和生产环境的代理配置了

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

• .env.development
• .env.production

一个表示开发环境，一个表示生产环境，建议在项目搭建初期就创建好这两个文件，首先拿开发环境来举例：

开发环境配置：

.env.development配置

ENV = 'development'

# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
VUE_APP_BASE_API  = '/api'

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

// 创建axios实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
    timeout: 60000 // 请求超时时间
})

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

devServer: {                //这里都是配置开发环境参数
        port: 8080,					//设置开发环境前端端口  选填
        proxy: {                 //设置开发环境代理
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:8599/api',     //代理的目标地址(后端设置的端口号)
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: { // 重定向
                    '^/api': ''
                }
            }
        }
    }

生产环境配置：

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

.env.production配置

ENV = 'production'

# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
VUE_APP_BASE_API  = 'http://localhost:8599/api'

这里可以看到，基本路径我们写的是完整后端路径，因为生产环境无法使用vue脚手架提供的后端路径代理，所以必须填写真实后端地址。
但是我们的生产环境项目一般是结合nginx一起部署的，如果你不想让客户端直接请求真实的后端IP+端口，那么我们也可以通过nginx来做到路径代理，原理和vue.config.js中的一样，只是配置不同，下面带大家配置一下：

env.production代理方式配置

ENV = 'production'

# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
VUE_APP_BASE_API  = '/api'

Nginx配置

worker_processes  1;

events {
  worker_connections  1024;
}

http {
  include       mime.types;
  default_type  application/octet-stream;
  keepalive_timeout  65;
  
  
  
  server {
    listen 80;
    charset utf-8;
    server_name localhost;
    
    location / {
      root /usr/share/nginx/html/dist;           #指向npm build打出来的包路径
      index index.html index.htm;
    }
    
    #/api是vue中配置的代理路径
    location /api {
      proxy_connect_timeout 300;
      proxy_send_timeout 300;
      proxy_read_timeout 300;
      proxy_buffers 8 1M;
      proxy_busy_buffers_size 1M;
      proxy_temp_file_write_size 1M;
      proxy_set_header Host $http_host;
      proxy_set_header Cookie $http_cookie;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_pass http://127.0.0.1:8050/api;	//这里填写真实的后端地址
    }
    
    }
    
}

nginx修改配置后记得执行一下nginx -s reload,配置好后就大功告成了，其作用和配置vue.config.js是一样的。