新建一个Vue项目后,如何在vue.config,js中配置后端访问地址

news2025/2/2 23:51:45

在这里插入图片描述

在 Vue 2 项目中,可以通过配置 vue.config.js 文件来设置后端访问地址。下面是一个简单的示例:

  1. 在项目根目录下新建 vue.config.js 文件(如果已存在,则直接编辑该文件)。
  2. vue.config.js 文件中添加以下内容:
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com',  // 设置后端接口的访问地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''  // 将请求路径中的 '/api' 替换为空字符串
        }
      }
    }
  }
}

以上配置中,target 字段指定了后端接口的访问地址。这里使用了代理功能,将以 /api 开头的请求转发到指定的后端地址上。changeOrigin 选项设置为 true 表示启用跨域访问。

  1. 确保后端接口的实际访问地址与 target 字段保持一致。如果需要修改,请将 'http://backend.example.com' 替换为实际的后端访问地址。

  2. 保存 vue.config.js 文件,并重新启动 Vue 2 项目。

配置完成后,前端在访问后端接口时,可以使用相对路径 /api/xxx,代理会将其转发到后端指定的地址。例如,若要访问后端接口 http://backend.example.com/api/user,可以在前端代码中使用 /api/user 进行请求。

请注意,以上配置仅适用于开发环境(npm run serve)。如果要在生产环境中使用该代理配置,需要相应调整部署和服务器设置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/762369.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ClickHouse原理剖析

1.ClickHouse简介 ClickHouse是一款开源的面向联机分析处理的列式数据库,其独立于Hadoop大数据体系,最核心的特点是极致压缩率和极速查询性能。同时,ClickHouse支持SQL查询,且查询性能好,特别是基于大宽表的聚合分析查…

yolo系列学习

文章目录 理论基础YOLO-V1YOLO-V2YOLOV3 教学视频 理论基础 不同阶段算法优缺点分析 two-stage (两阶段) :Faster-rcnn、Mask-Rcnn ,多了预选框操作RPNOne-stage (单阶段):YOLO 指标分析 精度 Precision 查准率,预测为正且实际…

亚马逊、lazada店铺销售策略揭秘:如何利用测评自养号突破瓶颈?

在跨境平台上,想要取得突破性的销售成绩并不容易。随着竞争的日益激烈,商家们需要采取有效的销售策略来突破销售瓶颈。本文将揭示三种结合测评自养号的销售策略,帮助卖家在跨境平台上取得更好的销售业绩。 一、建立完善的自养号评价体系 自…

git rebase (合并代码和整理提交记录)图文详解

git rebase详解,附带操作过程命令,运行图片 合并代码初始代码分支结构merge合并代码rebase合并代码 整理提交记录背景-整理提交记录步骤-图文详解 建议在看这篇文章之前一定要看完:git reset 命令详解 git revert命令详解。 看完上面的文章后…

基于scrcpy的Android群控项目重构,获取Android屏幕元素信息并编写自动化事件

系列文章目录 基于scrcpy的远程调试方案 基于scrcpy的Android群控项目重构 基于scrcpy的Android群控项目重构 进阶版 基于scrcpy的Android群控项目重构,获取Android屏幕元素信息并编写自动化事件(视频) 基于scrcpy的Android群控项目重构…

struct详解

导入 我们有没有这种情况,总想有一个数组,其中可以有int,double,char。。。各种类型,但是对于内置的数据类型显然是做不到的,于是就有了结构体类型 结构体是将多种不同的结构打包在一起,形成全新的类型进行使用 stru…

Spring的两种事务管理机制,面试这样答当场入职!

前言: 博主在最近的几次面试中,大中小厂都问到了Spring的事务相关问题,这块知识确实是面试中的重点内容,因此结合所看的书籍,在这篇文章中总结下。该专栏比较适合刚入坑Java的小白以及准备秋招的大佬阅读,感…

刻录到光盘功能看不见怎么办

刻录到光盘功能看不见怎么办 1、 打开组策略 同时按键WINR,打开运行对话框,输入gpedit.msc,打开组策略(如果发现输入gpedit.msc后无法打开组策略,请参照文件后面的方法进行操作) 2 、查找“删除CD刻录…

Java开发基础系列(五):对象方法参数

😊 作者: 一恍过去 💖 主页: https://blog.csdn.net/zhuocailing3390 🎊 社区: Java技术栈交流 🎉 主题: Java开发基础系列(五):对象方法参数 ⏱️ 创作时间&#x…

Pycharm 搭建 Django 项目,看完这一篇就够了

1. 安装需求 在使用 python 框架 Django 需要注意下面事项 Pycharm 版本是专业版而不是社区版本Pycharm 配置好了 python 解释器 (一般我们现在用的都是python3)我自己使用的是 Pycharm 版本是2020.1.2 2. 准备工作 2.1 新建项目 首先我们打开 Pycharm …

opencv -10 基础运算之 图像加权和(图像融合图像修复视频合成)

什么是图像加权和? 所谓图像加权和,就是在计算两幅图像的像素值之和时,将每幅图像的权重考虑进来,可以用公式表示为: dst saturate(src1 𝛼 src2 𝛽 𝛾)式中,satu…

无缝集成:基于FastAPI实现AI模型服务与nacos的完美融合

1 场景介绍 当我们使用python构建AI模型算法的过程中,经常会遇到如下的问题: 这个模型如何提供给其他微服务调用(比如JAVA构建的微服务)?这个模型如何做到多个服务节点的负载均衡?这个模型如何做到服务的…

Python高光谱遥感数据处理与高光谱遥感机器学习方法深度应用

提供一套基于Python编程工具的高光谱数据处理方法和应用案例。 本文涵盖高光谱遥感的基础、方法和实践。基础篇,用通俗易懂的语言解释高光谱的基本概念和理论,深入理解科学原理。方法篇结合Python编程工具,专注于解决高频技术难题&#xff0c…

工欲善其事,必先利其器之—react-native-debugger调试react native应用

调试react应用通常利用chrome的inspector的功能和两个最常用的扩展 1、React Developer Tools (主要用于debug组件结构) 2、Redux DevTools (主要用于debug redux store的数据) 对于react native应用,我们一般就使用react-nativ…

C++无锁编程——无锁队列

C无锁编程——无锁队列 贺志国 2023.7.11 上一篇博客给出了最简单的C数据结构——堆栈的几种无锁实现方法。队列的挑战与栈的有些不同,因为Push()和Pop()函数在队列中操作的不是同一个地方。因此同步的需求就不一样。需要保证对一端的修改是正确的,且对…

TCP/IP网络编程 第十二章:I/O复用

基于I/O复用的服务器端 多进程服务器端的缺点和解决方法 为了构建并发服务器,只要有客户端连接请求就会创建新进程。这的确是实际操作中采用的种方案,但并非十全十美,因为创建进程时需要付出极大代价。这需要大量的运算和内存空间&#xff…

Vue列表排序

开始前先回顾一下sort排序用法&#xff1a; 定义一串数组arr&#xff0c;使用sort排序&#xff0c;会收到前后两个数据项设置两个参数a&#xff0c;b。 注意&#xff1a;a-b 是升序 b-a 是降序 a-b升序&#xff1a; <script>let arr [12,11,2,5,76,33]arr.sort((a,b…

家居商城小程序:打造舒适家居生活的优选平台

随着人们对家居生活品质的追求&#xff0c;家居商城小程序成为提供便捷购物和个性化服务的不可或缺的工具。通过家居商城小程序&#xff0c;用户可以浏览并购买各类家居商品&#xff0c;如家具、装饰品、家纺等。同时&#xff0c;家居商城小程序能提供热销商品推荐、客户评价和…

浅析高校用电问题及智慧电力监管平台的构建 安科瑞 许敏

摘 要&#xff1a;介绍了当前高校用电存在的问题&#xff0c;进行了原因分析&#xff0c;由此提出建立高校用电智慧监管平台。对高校用电智慧监管平台的构架进行设计&#xff0c;运用物联网技术&#xff0c;实现各回路实时自主控制&#xff0c;并细化管理权限&#xff0c;实现…

Swift 周报 第三十三期

文章目录 前言新闻和社区App 内购买项目和订阅即将实行价格与税率调整为家庭提供安全的 App 体验 提案正在审查的提案 Swift论坛推荐博文话题讨论关于我们 前言 本期是 Swift 编辑组自主整理周报的第二十四期&#xff0c;每个模块已初步成型。各位读者如果有好的提议&#xff…