vue 使用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;

还有一种方式是,在根目录下创建两个文件
在这里插入图片描述
分别配置地址
在这里插入图片描述
在这里插入图片描述
然后使用
在这里插入图片描述
但是,这种方式我自己实测不行。生产环境能运行,自动化部署的线上环境不行。
大家可以尝试一下。

猜你喜欢

转载自blog.csdn.net/qq_43691886/article/details/113750195