Vue - Vue配置proxy代理，开发、测试、生产环境

1、新建三个环境的配置文件 

在src同级目录也就是根目录下新建文件：.env.development（开发环境）、.env.test（测试环境）、.env.production文件（生产环境）

2、三个环境的配置文件

开发环境 .env.development

# 开发环境
NODE_ENV = 'development'

# 开发环境，api前缀
VUE_APP_BASE_API = '/api'

#开发环境，Url地址
VUE_APP_BASE_RUL = 'http://xxxx:8081/

测试环境 .env.test

# 测试环境
NODE_ENV = 'test'

# 测试环境，api前缀
VUE_APP_BASE_API = '/test-api'

#测试环境，Url地址
VUE_APP_BASE_RUL = 'http://xxxx:8081/'

生产环境 .env.production

# 生产环境
NODE_ENV = 'production'

# 生产环境，api前缀
VUE_APP_BASE_API = '/prod-api'

#生产环境，Url地址
VUE_APP_BASE_RUL = 'http://xxxx:8081/'

3、vue.config.js文件配置本地服务器代理devServer

 // webpack-dev-server 相关配置
  devServer: {
    host: "0.0.0.0",
    port: port,
    open: false,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        // 服务器
        target: `http://192.168.1.11:8080`,
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
      },
    },
    disableHostCheck: true,
  },

4、axios 配置baseURL

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// 或
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: process.env.VUE_APP_BASE_URL,
    // 超时
    timeout: 100000
})

5、package.json 配置打包、启动

"serve": "vue-cli-service serve",    //启动
"build:test": "vue-cli-service build --mode test",   //测试
"build:prod": "vue-cli-service build",   // 生产

vue配置开发环境和生产环境_vue项目开发环境和生产环境配置_前路漫漫雨纷纷的博客-CSDN博客

vue项目配置生产、测试和开发环境_vue环境配置 生产 开发 测试_林梓阳的博客-CSDN博客

vue配置开发环境，测试环境，生产环境跨域 - 简书 VUE配置proxy代理、开发环境、测试环境、生产环境 - 简书