配置开发环境.env.development 和生产环境.env.production，在前端解决跨域问题

vue3项目为例：

创建  .env.development

//.env.development
NODE_ENV = 'development'
VUE_APP_BASE_API1 = '/devApi'
VUE_APP_SRC1 = 'https://abcd.com/'   //接口地址

创建 .env.production

//.env.production
NODE_ENV = 'production'
VUE_APP_BASE_API1 = '/devApi'
VUE_APP_SRC1 = 'https://abcd.com/'   //接口地址

创建的 vue.config.js

//vue.config.js
module.exports = {
  publicPath: './',
  assetsDir: 'static', // 放置静态资源（js,css,img）的目录
  productionSourceMap: false,// 生产环境是否生成 sourceMap 文件,定位
  devServer: {
    hot: true,
    https: false,
    port: 8500,
    proxy: {
      // 匹配到/localApi开头时 替换成target指定的地址
      '/devApi': {
        // 本地
        target: process.env.VUE_APP_SRC1,
        // target: 'http://xxx.xxx.xxx.xx:8080',
        changeOrigin: process.env.NODE_ENV === 'development' ? true : false, // 开发环境才开启反向代理, 生产环境不开启 也就是是否允许跨域问题
        pathRewrite: {
          // 把匹配到的/localApi这段开头 替换成 /
          '^/devApi': '/'
        }
      },
    }
  },
}

在main.js使用接口地址的时候

//main.js
import axios from 'axios'
const instance = axios.create({
    timeout: 10 * 60 * 1000,   // 超时
    baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_SRC1 : process.env.VUE_APP_BASE_API1   //区分是开发环境还是生产环境
  })
export default instance