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

相关推荐
拜无忧1 分钟前
【教程】Vue 3 项目架构终极指南:一份面向新手的、高性能的实战教程
前端·vue.js
Boilermaker19921 分钟前
【Java】网络编程(5)
网络
星海穿梭者10 分钟前
SQL SERVER 查看锁表
java·服务器·前端
一枚前端小能手13 分钟前
「周更第5期」实用JS库推荐:RxJS
前端·javascript·rxjs
影i13 分钟前
关于浏览器 Cookie 共享机制的学习与梳理
前端
Voyager_413 分钟前
Linux服务器NAS挂载:Truenas
linux·运维·服务器
文心快码BaiduComate14 分钟前
文心快码已接入GLM-4.6模型
前端·后端·设计模式
RoyLin25 分钟前
C++ 原生扩展、node-gyp 与 CMake.js
前端·后端·node.js
我是天龙_绍40 分钟前
二进制散列值 搞 权限组合,记口诀:| 有1则1 ,&同1则1
前端
江城开朗的豌豆1 小时前
拆解微信小程序的“积木盒子”:这些原生组件你都玩明白了吗?
前端·javascript·微信小程序