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

xixixin_2025-05-17 7:06

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

服务器的基本配置

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