一、获取config目录
因为后端proxy
接口是放置在src
外面的config
目录中的,如果要方便获取,可以设置类似于用@
代表src
一样的路径别名。
找到 webpack
配置目录,比如:webpack.base.conf.js
,添加如下注释代码
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
"@": resolve("src"),
"#": resolve("config") //新增用#代替config文件夹
}
},
二、获取接口proxy代理地址
需求是某个接口需要服务器的hostname
和port
,这时就需要知道后端代理地址。比如下方的target
地址。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
1、在需要获取地址的页面导入该文件
import API_CONFIG from "#/index.js"; //#即为第一步配置的config文件夹的别名
2、继续获取target
地址
// 如果是开发环境
if (process.env.NODE_ENV == "development") {
//将得到的target地址分割成数组
let api = API_CONFIG.dev.proxyTable["/base"].target.split("/");
this.form.hostName = api[0] + "//" + api[2];
} else {
//如果是生产环境
this.form.hostName = location.protocol + "//" + location.host;
}
如下是在生产环境中获取后的地址和环境变量打印出来的值:
如果你对web前端开发、面试感兴趣的话可以加V:imqdcnn。群里有各种学习资源发放,免费答疑,更有行业深潜多年的技术牛人分析讲解。
祝你能成为一名优秀的WEB前端开发工程师!