在vue中如何获取项目src外层的config目录以及api接口proxy的target代理地址-阿里云开发者社区

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

2024-01-18 64

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在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;
  }