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

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

服务器的基本配置

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

代理配置

javascript 复制代码
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

示例:

javascript 复制代码
// 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 地址

相关推荐
coooliang10 小时前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos
tang7778910 小时前
金融行业:静态与动态代理 IP 的选型与风控
网络·tcp/ip·金融
程序员码歌10 小时前
零代码AI编程实战-热搜从0到1技术方案
前端·ai编程·cursor
kk不中嘞10 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
Xの哲學10 小时前
Linux RCU (Read-Copy-Update) 机制深度分析
linux·网络·算法·架构·边缘计算
東雪蓮☆10 小时前
Linux 网络流量监控 Shell 脚本详解(支持邮件告警)
linux·运维·服务器
吐个泡泡v10 小时前
网络编程基础:一文搞懂 Socket、HTTP、HTTPS、TCP/IP、SSL 的关系
网络·网络协议·http·https·socket·ssl·tcp
服务端技术栈10 小时前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序
一个很老的小萌新10 小时前
json 解析 [{“id“:1,“name“:“apple“},{“id“:2,“name“:“banana“}]
java·前端·json
yanlele11 小时前
前端面试第 78 期 - 2025.09.07 更新 Nginx 专题面试总结(12 道题)
前端·javascript·面试