Vue_Vite3 配置跨域

选项写法

拼接路径

---

:::details 点击查看代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

export default ({ mode }) => {
    return defineConfig({
        plugins: [
            vue(),
            vueJsx(),
        ],
        css: {},
        resolve: {},
        optimizeDeps: {},
        build: {},
        server: {
            proxy: {
                '/add': {
                    target: 'http://localhost:4000',
                    changeOrigin: true,
                },
            },
        },
    });
};

:::

重写路径

---

:::details 点击查看代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

export default ({ mode }) => {
    return defineConfig({
        plugins: [
            vue(),
            vueJsx(),
        ],
        css: {},
        resolve: {},
        optimizeDeps: {},
        build: {},
        server: {
            proxy: {
                '/api': {
                    target: 'http://localhost:4000',
                    changeOrigin: true,
                    rewrite: (path) => {
                        return path.replace(/\/api/, '');
                    },
                },
            },
        },
    });
};

:::

正则表达式写法

拼接路径

---

:::details 点击查看代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

export default ({ mode }) => {
    return defineConfig({
        plugins: [
            vue(),
            vueJsx(),
        ],
        css: {},
        resolve: {},
        optimizeDeps: {},
        build: {},
        server: {
            proxy: {
                '^/api2/(api3|api4).*': {
                    target: 'http://localhost:4000',
                    changeOrigin: true,
                },
            },
        },
    });
};

:::

重写路径

---

:::details 重写路径

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

export default ({ mode }) => {
    return defineConfig({
        plugins: [
            vue(),
            vueJsx(),
        ],
        css: {},
        resolve: {},
        optimizeDeps: {},
        build: {},
        server: {
            proxy: {
                '/api': {
                    target: 'http://localhost:4000',
                    changeOrigin: true,
                    rewrite: (path) => {
                        return path.replace(/\/api/, '');
                    },
                },
                '^/api2/(api3|api4).*': {
                    target: 'http://localhost:4000',
                    changeOrigin: true,
                    rewrite: (path) => {
                        return path.replace(/\/api2\/(api3|api4)/, '');
                    },
                },
            },
        },
    });
};

:::