在開發過程中，我使用Vite為React客戶端在http://localhost:5173/上進行HMR，並使用Node後端處理API呼叫和資源。
對於生產構建，Node將提供前端服務，所以我想使用/whatever/endpoint。因此，當由Vite提供服務時，我需要一種重寫的方式，將/對應到http://my.api.host:3000/。
我確定這一定是常見的操作，但我不知道如何做到。根據文檔，我認為應該這樣做：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
export default defineConfig({
plugins: [react()],
server: {
origin: 'http://my.api.host:3000'
},
base: 'http://my.api.host:3000'
})
但是這個：
backgroundImage: 'url(/img/backgrounds/main.jpg)'
仍然嘗試從http://localhost:5173提供服務。
要在使用Vite進行生產時，重寫API端點並從正確位置提供資源，您可以在Vite配置中使用代理選項。以下是如何配置的範例：
import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react-swc'; export default defineConfig({ plugins: [react()], server: { proxy: { '/whatever/endpoint': { target: 'http://my.api.host:3000', changeOrigin: true, rewrite: (path) => path.replace(/^\/whatever\/endpoint/, ''), }, }, }, base: 'http://my.api.host:3000/', });'rewrite'函數用於在將請求路徑轉送到目標之前，從請求路徑中刪除/whatever/endpoint前綴。