vue-cli项目 在生产环境怎么跨域，开发环境已解决

Question

问题描述

后端的地址其实是 http://101.132.150.220:8080/room/all

config index.js下

proxyTable: {
  '/api': {
    target: 'http://101.132.150.220:8080/', //设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true, //如果需要跨域
    pathRewrite: {
      '^/api': '/'
      //这里理解成用面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用 'http://425.0.100.100:8888/user/add'，
      //直接写‘ / api / user / add’ 即可
    }
  }
},

main.js下

import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$http = axios
axios.defaults.baseURL = '/api'

问题出现的环境背景及自己尝试过哪些方法

搜索到可以通过配置 nginx.conf来代理 实现正式环境的跨域
实在不知道url rewrite怎么写

多谢各位指点

Answer 1

const baseUrlHash = {
    production: 'http://101.132.150.220:8080/room/all',
    development: '/api',
};

const BASE_URL = baseUrlHash[process.env.NODE_ENV]; // 根据构建名称创建不同地址

// 这里是封装的 axios ，
const service = axios.create({
  baseURL,
})
// 调用接口的地方
// 开发阶段调用的是 '/api//app/user',这里的 /api 就是开发阶段代理的地址
// 线上实际调用的地址是 http://101.132.150.220:8080/room/all/app/user
axios.get('/app/user')