【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 地址

相关推荐
egoist202311 分钟前
【Linux仓库】虚拟地址空间【进程·陆】
linux·运维·服务器·操作系统·进程·虚拟地址空间·fork
智慧化智能化数字化方案24 分钟前
华为IPD(集成产品开发)流程是其研发管理的核心体系
网络·华为ipd流程·ipd流程体系·ipd产品研发
Mintopia35 分钟前
像素的进化史诗:计算机图形学与屏幕的千年之恋
前端·javascript·计算机图形学
Mintopia38 分钟前
Three.js 中三角形到四边形的顶点变换:一场几何的华丽变身
前端·javascript·three.js
归于尽1 小时前
async/await 从入门到精通,解锁异步编程的优雅密码
前端·javascript
陈随易1 小时前
Kimi k2不行?一个小技巧,大幅提高一次成型的概率
前端·后端·程序员
猩猩程序员1 小时前
Rust 动态类型与类型反射详解
前端
kfepiza1 小时前
Linux的NetworkManager的nmcli配置网桥(bridge) 笔记250712
linux·运维·网络·笔记·tcp/ip·ip·tcp
杨进军1 小时前
React 实现节点删除
前端·react.js·前端框架