Cara menggunakan URL asas yang berbeza
P粉805922437
P粉805922437 2024-01-16 23:30:16
0
1
454

Semasa pembangunan, saya menggunakan Vite untuk klien React untuk HMR pada http://localhost:5173/ dan menggunakan bahagian belakang Node untuk mengendalikan panggilan dan sumber API.

Untuk binaan pengeluaran, Node akan menyediakan perkhidmatan bahagian hadapan, jadi saya ingin menggunakan /whatever/endpoint。因此,当由Vite提供服务时,我需要一种重写的方式,将/映射到http://my.api.host:3000/.

Saya pasti ini mesti operasi biasa, tetapi saya tidak tahu bagaimana untuk melakukannya. Menurut dokumentasi, saya rasa ini perlu dilakukan:

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'
})

Tetapi ini:

backgroundImage: 'url(/img/backgrounds/main.jpg)'

Masih cuba memberikan perkhidmatan dari http://localhost:5173.

P粉805922437
P粉805922437

membalas semua(1)
P粉556159786

Untuk menulis semula titik akhir API dan menyampaikan sumber dari lokasi yang betul apabila menggunakan Vite untuk pengeluaran, anda boleh menggunakan pilihan proksi dalam konfigurasi Vite anda. Berikut ialah contoh cara mengkonfigurasinya:

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/',
});

Fungsi 'tulis semula' digunakan untuk mengalih keluar awalan /whatever/endpoint daripada laluan permintaan sebelum memajukannya ke sasaran.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan