vue-cli4 使用axios 开发环境与生产环境同时设置代理与baseURL

vue.config.js

vue-cli 4.x中没有这个文件,在项目根目录下自己新建一个

module.exports = {
  configureWebpack: {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://xxx.xxx:8080/xxxxxx/', //设置你调用的接口域名和端口号 
          changeOrigin: true, //这里设置是否跨域
          pathRewrite: { // 路径重写
            '^/api': ''
          }
        }
      }
    }
  },
};
复制代码

main.js (或者其他文件下)

import axios from 'axios';
Vue.prototype["$http"]=axios;
/*设置baseURL*/
let baseURL = '/api';
// process.env.NODE_ENV  用于判断当前运行环境,根据 npm run serve 或 npm run build 
if (process.env.NODE_ENV === 'production') {
  baseURL =  'http://xxx.xxx:8080/xxxxxx/';
}
axios.defaults.baseURL = baseURL;
复制代码

还有一种方式是,在根目录下创建两个文件

在这里插入图片描述

分别配置地址

在这里插入图片描述

在这里插入图片描述

然后使用

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享