使用不同的基礎URL的方法

Question

在開發過程中，我使用Vite為React客戶端在http://localhost:5173/上進行HMR，並使用Node後端處理API呼叫和資源。

對於生產構建，Node將提供前端服務，所以我想使用/whatever/endpoint。因此，當由Vite提供服務時，我需要一種重寫的方式，將/對應到http://my.api.host:3000/。

我確定這一定是常見的操作，但我不知道如何做到。根據文檔，我認為應該這樣做：

vite.config.js

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提供服務。

Answer 1

要在使用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前綴。