vue配置代理

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

 1 module.exports = {
 2     assetsDir: 'static',
 3     parallel: false,
 4     publicPath: './',//history模式注释掉此行，hash模式需要
 5     
 6     productionSourceMap: false,
 7      devServer: {
 8        port: 8081,
 9        open: false,
10        overlay: {
11          warnings: false,
12          errors: true
13        },
14        proxy: {
18          '/api': {
19                 target: 'http://10.1.1.1/',  //后台接口地址
20                 changOrigin: true,  //允许跨域
21                 pathRewrite: {
22                   /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
23                     实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
24                    */
25                   '^/api': '' 
26                 }
27               },
28        }
29      },
30 }

接口公共配置

const service = axios.create({
  // 公共接口--这里注意后面会讲
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时时间 单位是ms，这里设置了3s的超时时间
  timeout: 300 * 1000,
  withCredentials: true
})

环境配置：

1.本地 .env.development (这里配合使用代理)

VUE_APP_BASE_API = '/api'

2.线上 .env.production

VUE_APP_BASE_API = 'http://xxx'
# 后台接口地址

以上是 vue配置代理 的全部内容， 来源链接： utcz.com/z/378470.html

回到顶部