Vue - Vue configures proxy proxy, development, testing and production environment

1. Create new configuration files for the three environments 

Create new files in the same level directory of src, that is, the root directory: .env.development（开发环境）, .env.test（测试环境）, .env.production files (production environment)

2. Configuration files of three environments

Development environment .env.development

# 开发环境
NODE_ENV = 'development'

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

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

Test environment .env.test

# 测试环境
NODE_ENV = 'test'

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

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

Production environment .env.production

# 生产环境
NODE_ENV = 'production'

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

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

3. The vue.config.js file configures the local server agent 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 configure 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 configures packaging and startup

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

vue configuration development environment and production environment_vue project development environment and production environment configuration_the road ahead is long and rainy blog-CSDN blog

vue project configuration production, testing and development environment_vue environment configuration production development testing_Lin Ziyang's blog-CSDN blog

Vue configures the development environment, test environment, and production environment across domains - a short book VUE configures the proxy, development environment, test environment, and production environment - a short book