81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import path from 'node:path'
|
||
import { fileURLToPath } from 'node:url'
|
||
|
||
import react from '@vitejs/plugin-react'
|
||
import { defineConfig } from 'vite'
|
||
|
||
const currentDir = path.dirname(fileURLToPath(import.meta.url))
|
||
const apiTarget = process.env.VITE_API_TARGET || 'http://127.0.0.1'
|
||
|
||
/**
|
||
* dev server 的 Host 白名单。
|
||
*
|
||
* 用隧道（ngrok / cloudflared）做公网联调时，请求经隧道打到 Caddy、再转发到本 dev server，
|
||
* Host 头是**隧道域名**；不在白名单里 Vite 会直接拒绝
|
||
* （"Blocked request. This host is not allowed."），表现为页面打不开、后端日志却一片正常。
|
||
*
|
||
* 所以：常见隧道域名后缀默认放行，`VITE_ALLOWED_HOSTS`（compose 里已透传）可再追加，
|
||
* 逗号分隔、允许 `.example.com` 这种后缀写法。只影响 dev server，不影响构建产物。
|
||
*/
|
||
const tunnelHosts = [
|
||
'.ngrok-free.app',
|
||
'.ngrok-free.dev',
|
||
'.ngrok.app',
|
||
'.ngrok.dev',
|
||
'.ngrok.io',
|
||
'.trycloudflare.com',
|
||
'.nyat.app',
|
||
'.natfrp.net',
|
||
'.natfrp.cloud',
|
||
]
|
||
const extraAllowedHosts = (process.env.VITE_ALLOWED_HOSTS || '')
|
||
.split(',')
|
||
.map((host) => host.trim())
|
||
.filter(Boolean)
|
||
|
||
const allowedHosts = [
|
||
...new Set([
|
||
'localhost',
|
||
'.localhost',
|
||
'127.0.0.1',
|
||
'221329.cc.cd',
|
||
'.cc.cd',
|
||
...tunnelHosts,
|
||
...extraAllowedHosts,
|
||
]),
|
||
]
|
||
|
||
export default defineConfig({
|
||
plugins: [react()],
|
||
resolve: {
|
||
alias: {
|
||
'@': path.resolve(currentDir, 'src'),
|
||
},
|
||
},
|
||
server: {
|
||
host: '0.0.0.0',
|
||
port: 5173,
|
||
/**
|
||
* Windows 下 Docker 绑定挂载（D:\... -> /app）收不到 inotify 事件，Vite 的文件监听
|
||
* 会失效：代码改了页面却一直不更新（和后端 tsx watch 同类问题）。
|
||
* 改用轮询，改文件后 HMR 才能正常触发。
|
||
*/
|
||
watch: {
|
||
usePolling: true,
|
||
interval: 300,
|
||
},
|
||
// 隧道/自定义域名访问 dev server 时需加入白名单，否则 Vite 会拦截 Host
|
||
allowedHosts,
|
||
proxy: {
|
||
'/api': {
|
||
target: apiTarget,
|
||
changeOrigin: true,
|
||
},
|
||
'/health': {
|
||
target: apiTarget,
|
||
changeOrigin: true,
|
||
},
|
||
},
|
||
},
|
||
})
|