在vue中如何获取项目src外层的config目录以及api接口proxy的target代理地址

一、获取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前端开发工程师！