Vue 3.x 生产环境接口 配置

新建一个config.js // 尽量 与main.js同级

//项目域名地址
let URL = "http://***.***.***.***:****";  //后台域名

let ROOT;
//由于封装的axios请求中，会将ROOT打包进去，为了方便之后不再更改，判断了当前环境，而生成的不同的ROOT
if (process.env.NODE_ENV === "development") {
  //开发环境下的代理地址，解决本地跨域跨域，配置在vue.config.js里
  ROOT = "/apis";
} else {
  //生产环境下的地址
  ROOT = URL;
}
// export default { ROOT, URL };
exports.URL = URL; //代理指向地址
exports.ROOT = ROOT;

vue.config.js里的配置

// 引进config.js
const BaseUrl = require("./src/config.js");
// 代理接口配置
devServer: {
    port: 8080, // 端口号
    host: "0.0.0.0",
    https: false, // https:{type:Boolean}
    open: false, //配置自动启动浏览器
    proxy: {
      [BaseUrl.ROOT]: {
        target: BaseUrl.URL, // 通过本地服务器将你的请求转发到这个地址
        changeOrigin: true, // 设置这个参数可以避免跨域
        pathRewrite: {
          [`^${BaseUrl.ROOT}`]: "/"
        }
      }
    }
  },

在vue 页面调用

this.$axios
    .post(BaseUrl.ROOT+"/login/", params)
    .then((res) => {
      console.log(res);
    })
    .catch(err => {
      console.log(err);
    });

注意config.js的路径，按自己项目配置的路径来。

项目结构

项目结构.png

有用的话 请点个赞吧