【Vite】前端开发服务器的配置

news2025/5/21 3:49:40

定义一些开发服务器的行为和代理规则

服务器的基本配置

server: {
  host: true,       // 监听所有网络地址
  port: 8081,       // 使用8081端口
  open: true,       // 启动时自动打开浏览器
  cors: true        // 启用CORS跨域支持
}

代理配置

proxy: {
  '/api': {
    target: 'https://www.xxxxxxx.com',  // 目标服务器地址
    changeOrigin: true,                 // 改变请求头中的origin为目标地址
    pathRewrite: {
      '^/api': ''                      // 重写路径,去掉/api前缀
    }
  }
}

作用

        启动一个开发服务器,监听8081端口;

        当访问本地服务器的 /api 路径时,请求会被代理到 https://www.xxxxxxx.com;

        例如:本地请求 /api/users 会被代理到 https://www.xxxxxxx.com;

示例:

// vite.config.ts 文件
export default defineConfig({
    server: {
    // https: true, //(使用https)启用 TLS + HTTP/2。
    // 注意:当 server.proxy 选项 也被使用时,将会仅使用 TLS
    host: true, // 监听所有地址
    port: 8081, //指定开发服务器端口:默认3000
    open: true, //启动时自动在浏览器中打开
    cors: true, //为开发服务器配置 CORS
    // proxy: {
      '/api': {
        target: 'https://www.xxxxxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
      // secure: false, // 如果目标服务器使用 HTTPS,但证书无效,可以设置为 false
      //   logLevel: 'debug' // 可选,用于调试
      // }
      // 配置自定义代理规则
      // 字符串简写写法
      // '/jpi': 'http://192.168.1.97:4567',
      // '/api': {
      //   target: 'https://cn.aoksend.com',
      //   changeOrigin: true, //是否跨域
      //   rewrite: path => path.replace(/^\/api/, '')
      // }
    }
})

配置完之后,运行项目会出现 Network 地址

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

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

相关文章

Spring Security与Spring Boot集成原理

Spring Security依赖的是过滤器机制,首先是web容器例如tomcat作为独立的产品,本身有自己的一套过滤器机制用来处理请求,那么如何将tomcat接收到的请求转入到Spring Security的处理逻辑呢?spring充分采用了tomcat的拓展机制提供了t…

VScode各文件转化为PDF的方法

文章目录 代码.py文件.ipynb文本和代码夹杂的文件方法 1:使用 VS Code 插件(推荐)步骤 1:安装必要插件步骤 2:安装 `nbconvert`步骤 3:间接导出(HTML → PDF)本文遇见了系列错误:解决方案:问题原因步骤 1:降级 Jinja2 至兼容版本步骤 2:确保 nbconvert 版本兼容替代…

Vue3学习(组合式API——Watch侦听器、watchEffect()详解)

目录 一、Watch侦听器。 (1)侦听单个数据。 (2)侦听多个数据。(数组写法?!) (3)immediate参数。(立即执行回调) (3)deep参数。(深层监…

【node.js】安装与配置

个人主页:Guiat 归属专栏:node.js 文章目录 1. Node.js简介1.1 Node.js的特点1.2 Node.js架构 2. Node.js安装2.1 下载和安装方法2.1.1 Windows安装2.1.2 macOS安装2.1.3 Linux安装 2.2 使用NVM安装和管理Node.js版本2.2.1 安装NVM2.2.2 使用NVM管理Node…

《AI大模型应知应会100篇》第62篇:TypeChat——类型安全的大模型编程框架

第62篇:TypeChat——类型安全的大模型编程框架 摘要 在构建 AI 应用时,一个常见的痛点是大语言模型(LLM)输出的不确定性与格式不一致问题。开发者往往需要手动解析、校验和处理模型返回的内容,这不仅增加了开发成本&a…

EdgeShard:通过协作边缘计算实现高效的 LLM 推理

(2024-05-23) EdgeShard: Efficient LLM Inference via Collaborative Edge Computing (EdgeShard:通过协作边缘计算实现高效的 LLM 推理) 作者: Mingjin Zhang; Jiannong Cao; Xiaoming Shen; Zeyang Cui;期刊: (发表日期: 2024-05-23)期刊分区:本地链接: Zhang 等 - 2024 …

火山 RTC 引擎9 ----集成 appkey

一、集成 appkey 1、网易RTC 初始化过程 1)、添加头文件 实现互动直播 - 互动直播 2.0网易云信互动直播产品的基本功能包括音视频通话和连麦直播,当您成功初始化 SDK 之后,您可以简单体验本产品的基本业务流程,例如主播加入房间…

Adminer:一个基于Web的轻量级数据库管理工具

Adminer 是一个由单个 PHP 文件实现的免费数据库管理工具,支持 MySQL、MariaDB、PostgreSQL、CockroachDB、SQLite、SQL Server、Oracle、Elasticsearch、SimpleDB、MongoDB、Firebird、Clickhouse 等数据库。 Adminer 支持的主要功能如下: 连接数据库服…

RK3568下QT实现按钮切换tabWidget

运行效果: 在 Qt 应用程序开发过程中,TabWidget 是一种非常实用的 UI 组件,它能够以选项卡的形式展示多个页面内容,帮助我们有效组织和管理复杂的界面布局。而在实际使用时,常常会有通过按钮点击来切换 TabWidget 页面的需求,本文将通过一个完整的示例,详细介绍如何在 Q…

2025 OceanBase 开发者大会全议程指南

5 月 17 日,第三届 OceanBase 开发者大会将在广州举办。 我们邀请数据库领军者与AI实践先锋,与开发者一起探讨数据库与 AI 协同创新的技术趋势,面对面交流 OceanBase 在 TP、AP、KV 及 AI 能力上的最新进展,深度体验“打破技术栈…

day017-磁盘管理-实战

文章目录 1. 硬盘命名规则2. 添加硬盘2.1 查看硬盘名称 3. 硬盘分区3.1 分区命名规则:mbr分区表格式3.2 创建分区:fdisk3.2.1 fdisk -l:查看硬盘及分区信息3.2.2 fdisk /dev/sdc :为该硬盘分区3.2.3 创建扩展分区和逻辑分区3.2.4 保存设置并退…

【成品设计】STM32和UCOS-II的项目

项目1:《基于STM32和UCOS-II的水质监测系统》 Ps:分为带系统版本和不带系统版本,功能都一样。 功能说明: 1. 单片机主控:STM32F103C8T6单片机作为核心控制。 2. 酸碱度传感器:实时采集当前PH值。 3. 水质…

Ngrok 配置:实现 Uniapp 前后端项目内网穿透

文章目录 一、下载并安装 ngrok二、配置 ngrok Authtoken三、启动本地 uniapp 项目四、使用 ngrok 暴露本地服务五、通过公网 URL 访问项目六、后端API项目的穿透问题排查 (uni-app 后端 API 示例)交互流程图示 七、ngrok Web 界面 (本地监控)八、停止 ngrok总结 ngrok 是一款…

鸿蒙ArkUI体验:Hexo博客客户端开发心得

最近部门也在跟进鸿蒙平台的业务开发,自己主要是做 Android 开发,主要使用 Kotlin/Java 语言。,需要对新的开发平台和开发模式进行学习,在业余时间开了个项目练手,做了个基于 Hexo 博客内容开发的App。鸿蒙主要使用Ark…

鸿蒙NEXT开发动画案例10

1.创建空白项目 2.Page文件夹下面新建Spin.ets文件,代码如下: interface TranslateOffset {x?:numbery?:number } /*** SpinKit动画组件 - SpinTen* author: CSDN-鸿蒙布道师* since: 2025/05/16*/ ComponentV2 export struct SpinTen {Require Para…

【Linux】Linux安装并配置Redis

目录 1.安装 2.启动服务 3.配置 3.1.绑定地址 3.2.保护模式 3.3.持久化选项 3.3.1.RDB 持久化 3.3.2.AOF 持久化 3.3.3.如何选择 1.安装 Redis 可以从默认的 CentOS 软件仓库中安装。运行以下命令来安装 Redis sudo dnf install redis -y 响应如下 2.启动服务 安装完成后&…

【11408学习记录】考研英语辞职信写作三步法:真题精讲+妙句活用+范文模板

应聘信 英语写作2005年考研英语真题小作文写作思路第一段第二段妙句7 9妙句11补充3补充4 第三段 妙句成文 每日一句词汇第一步:找谓语第二步:断句第三步:简化主句原因状语从句 英语 写作 2005年考研英语真题小作文 Directions:​​ Two m…

《黑马前端ajax+node.js+webpack+git教程》(笔记)——node.js教程+webpack教程(nodejs教程)

黑马程序员前端AJAX入门到实战全套教程,包含学前端框架必会的(ajaxnode.jswebpackgit),一套全覆盖 文章目录 Node.js与Webpack-01.Node.js入门定义和作用什么是前端工程化?(离不开node.js)Node.…

Flink 快速入门

本文涉及到大量的底层原理知识,包括运行机制图解都非常详细,还有一些实战案例,所以导致本篇文章会比较长,内容比较多,由于内容太多,很多目录可能展示不出来,需要去细心的查看,非常适…

阻塞队列:线程安全与生产者消费者模型解析

一、阻塞队列 阻塞队列就是基于普通队列做出扩展 1.线程安全的 如果针对一个已经满了的队列进行入队列,此时入队列操作就会阻塞,一直阻塞到队列不满(其他线程出队列元素)之后 如果针对一个已经空了的队列进行出队列&#xff0c…