vite.config.js-vite相关配置

31 阅读1分钟
    server: {
      port: 80,
      // host: true表示监听所有地址
      host: true,
      open: true,
      proxy: {
        // https://cn.vitejs.dev/config/#server-proxy
        "/dev-api": {
          target: baseUrl,
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, ""),
        },
        // springdoc proxy
        "^/v3/api-docs/(.*)": {
          target: baseUrl,
          changeOrigin: true,
        },
      },
    }
  • port: 设置开发服务器监听的端口号

    • 使用 80 端口(HTTP默认端口)可以直接通过 http://localhost 访问
  • host: 控制服务器监听的主机

    • true 表示监听所有网络接口(包括局域网和本地)
  • open: 启动开发服务器后自动打开浏览器

  • proxy: 反向代理

    "/dev-api": {
      target: baseUrl,          // 后端API地址,需要代理的域名
      ws: false,                // 是否启用websockets
      changeOrigin: true,       // 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
      rewrite: (p) => p.replace(/^\/dev-api/, "") // 重写请求路径上匹配到的字段,如果不需要在请求路径上,重写为""
    }
    
    • 典型应用场景:
      • 解决开发环境跨域问题
      • 统一API请求路径前缀
      • 将不同路径代理到不同后端服务