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

简介: 在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代理地址

需求是某个接口需要服务器的hostnameport,这时就需要知道后端代理地址。比如下方的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前端开发工程师!

相关文章
|
3月前
|
自然语言处理 算法 Java
地址描述转换为坐标点不使用API,有什么转换的方法?
地址描述转换为坐标点不使用API,有什么转换的方法?
352 64
|
1月前
|
API
天气预报15日-墨迹天气-地址查询版免费API接口教程
该接口提供15日天气预报服务,通过指定地址获取墨迹天气预报。支持POST或GET请求,需提供用户ID、KEY、省份名称及地点等参数。返回数据包括15天内每天的天气详情,如最高最低温度、天气变化及图标等。示例中使用的ID和KEY为公共测试账号,建议使用个人账号以获得更高调用频率。
|
1月前
|
API
获取网页重定向地址免费API接口教程
该API用于获取网页重定向跳转后的最终地址。请求地址为`https://cn.apihz.cn/api/wangzhan/tiaozhuan.php`,支持POST或GET方式。请求参数包括`id`、`key`和`url`,返回数据包含状态码`code`和最终URL`url`。示例返回:`{"code":200,"url":"https://www.baidu.com/"}`。
78 29
|
1月前
|
API
天气预报1天-中国气象局-地址查询版免费API接口教程
此接口提供中国气象局官方的当日天气信息,支持POST和GET请求,需提供用户ID、KEY、省份及具体地点。返回数据包括状态码、消息、天气详情等。示例中使用的ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频次。
|
1月前
|
API
天气预报-腾讯天气-7天-地址查询版免费API接口
这是一个免费的腾讯天气API接口,用于查询指定地址的7天天气预报。支持POST和GET请求方式。请求参数包括id、key、province、city、county等。返回参数包含日期、天气状况、温度等信息。 示例请求地址:https://cn.apihz.cn/api/tianqi/tengxun.php?id=88888888&key=88888888&province=四川省&city=绵阳市&county=。
|
3月前
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
本文讨论了在配置Vite项目时遇到的`vite.defineConfig is not defined`错误,这通常是由于缺少必要的导入语句导致的。文章还涉及了如何创建最新版本的Vite项目以及如何处理`configEnv is not defined`的问题。
224 3
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
|
2月前
|
IDE API 定位技术
Python--API编程:IP地址翻译成实际的物理地址
Python--API编程:IP地址翻译成实际的物理地址
68 0
|
4月前
|
JavaScript Java Python
【Azure 应用服务】在Azure App Service for Windows 中部署Java/NodeJS/Python项目时,web.config的配置模板内容
【Azure 应用服务】在Azure App Service for Windows 中部署Java/NodeJS/Python项目时,web.config的配置模板内容
|
5月前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
11天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。