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

秒速五厘米 2024-03-17 09:21 19阅读 0赞

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

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

![6d8f6417761f4f5d9e501c2fbb8d44af.png][]

### 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环境配置 生产 开发 测试\_林梓阳的博客-CSDN博客][vue_vue_ _ _ _-CSDN]

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

[6d8f6417761f4f5d9e501c2fbb8d44af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/286a77725b4c4653acbbf33e4e55d998.png
[vue_vue_-CSDN]: https://blog.csdn.net/xia_tian666/article/details/127005972
[vue_vue_ _ _ _-CSDN]: https://blog.csdn.net/weixin_43930421/article/details/125015960
[vue_ -]: https://www.jianshu.com/p/2c58792c26e7
[VUE_proxy_ -]: https://www.jianshu.com/p/cd5b7410eccb