彻底弄懂vue接口代理

1.开发环境下,把baseUrl设置为空。 baseUrl:''

2.设置proxy

 devServer: {
    // before(app) {
    //   mock(app)
    // },
    open: false, // 自动打开浏览器
    port: 8086, // 端口
    proxy: {
      '/api': {
        target: 'http://api.st1.cn', // 这里可以指向本地mock的服务,也可以指向服务端的host
        ws: false, // 是否启用websockets,项目存在ws连接时开启
        changOrigin: true, // 是否将请求header中的origin修改为目标地址
        // pathRewrite: {
        //   '^/admin': ''
        // }
      }
    }, // 转发代理配置
    // 浏览器 overlay(刷新) 同时显示eslint的警告和错误
    overlay: {
      warnings: true,
      errors: true
    }
  },

接口配置:

import env from './env'

const baseUrl = {
  test: { // 测试环境
    api: '//api.st1.cn',
  },
  dev: { // 开发环境
    api: '//api.st1.cn',
  },
  local: { // 本地环境
    api: '//api.st1.cn',
    // api: '',
  },
  prod: { // 生产环境
    api: '//api.com',
  },
  pre: { // 预发环境
    api: '//api.com',
  },
}

export default baseUrl[env]

上一篇:单调栈总结


下一篇:C#基础(二):enum与struct