新建一个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
