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

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

服务器的基本配置

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

代理配置

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；

示例：

// vite.config.ts 文件
export default defineConfig({server: {// https: true, //(使用https)启用 TLS + HTTP/2。// 注意：当 server.proxy 选项 也被使用时，将会仅使用 TLShost: true, // 监听所有地址port: 8081, //指定开发服务器端口：默认3000open: 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 地址