vue3设置代理的问题及代理无效问题

1、vue项目中环境配置（.env.development文件和 .env.production文件）为：

# 开发环境配置(本地)
ENV = 'development'
NODE_ENV = development

# 开发环境  代理proxy
VUE_APP_BASE_API = '/dev-api'

# 开发环境  网关URL
VUE_APP_REQUEST_URL = 'http://10.10.10.10/aa'

# 生产环境配置
ENV = 'production'
NODE_ENV = production

# 生产环境  代理proxy
VUE_APP_BASE_API = '/pro-api'

# 生产环境 网关URL
VUE_APP_REQUEST_URL = 'http://10.10.10.10/aa'

2、vue项目中的代理配置（vue.config.js）为：

module.exports = {
	devServer: {
		host:"localhost",
		https:false,
		//端口号
		port: 8082,
		//自动打开浏览器
		open: true,
		// 配置代理 
		proxy: {
			[process.env.VUE_APP_BASE_API]: {
				target: process.env.VUE_APP_REQUEST_URL,//在.env.development和.env.production配置过的数据，例如：http://localhost:8082/
				// 是否改变域名
				changeOrigin: true, 
				// 代理websockets
				ws: true,
				// 路径重写
				pathRewrite: {  // pathRewrite的作用是将 process.env.VUE_APP_BASE_API 进行替换,如果接口中没有 process.env.VUE_APP_BASE_API，那就替换成 '' ,
                                  //  如果接口中需要 process.env.VUE_APP_BASE_API， 那么就需要写成 ['^'+process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API，可以理解成为一个重定向或者重新赋值的作用，
					/**
					 * 注意：一般项目有统一的访问名称：如api,此时需要路径重写为如下，相当于代理为：http://localhost:8082/api,如果请求
					 * 路径为：http://localhost:8082，那么就不需要重写代理名，或者写为："/api": "/"
					 */
					 ['^'+process.env.VUE_APP_BASE_API]: ''
				},
			},
		},
	},
};

3、vue项目中axios的封装文件（axios.js）为:
request/index.js文件

import axios from "axios"
const Interface = axios.create({
    baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_REQUEST_URL : process.env.VUE_APP_BASE_API, // baseURL这里单词要特别注意一下
    timeout: 20000,
});
// 调用接口的拦截器进行一些处理
Interface.interceptors.request.use(config => {
    //如果token存在
    if(localStorage.getItem("token")){
        config.headers["Authorization"] = localStorage.getItem("token")
    }
    return config
})
//获取后端给我们的数据做一个响应后拦截操作
Interface.interceptors.response.use(res => {
    console.log("response22=>",res)
    if(res.status == 200){
        if(res.data.code == 200){
            return res.data
        }else{
            return alert(res.data.message)
        }
    }else{
        return Promise.reject("出错了....")
    }
})
export {Interface}   

4、接口的使用

import {Interface} from "@/request/index.js"
// 登录  --  卢
export const getLogin = (data) => {
    return Interface.post("/sso/login",   // 传formdata格式，这里不能加大括号
        data
    );
};