关于vue3项目中 vite.config.js项目配置多个请求地址代理配置-CSDN博客

安宇雨 - 随手采集
2024-08-14 09:48:34
随手采集
0000-未整理-等待研究

关于VUE3 vite.config.js文件配置相关

提示：本文记录了我们项目中使用到了多个不同的接口请求前缀地址配置代理，如果有更好的优化方案欢迎大佬指点呀：

以下是我最近项目中的vite.config.js文件配置，由于刚开始vue3不久，希望各位大佬不吝赐教，快来分享你们的配置呀。

vite.config.js配置如下

/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig, loadEnv } from 'vite';
import path from 'path';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig(({ mode }) => {
    // 加载 .env 文件
    const env = loadEnv(mode, process.cwd());
    return {
        // host: "192.168.X.XXX", 这里改为自己的IP地址可以让同事直接访问自己本地，方便及时看到效果
        base: env.VITE_PUBLIC_PATH,
        resolve: {
            alias: {
                '@/': `${path.resolve(__dirname, 'src')}/`,
            },
        },
        server: {
            port: Number(env.VITE_PORT),
            proxy: {
                [env.VITE_BASE_API]: {
                    // rewrite: (path) => path.replace(/^\/api/, ""),
                    target: env.VITE_PROXY_API,
                    changeOrigin: true,
                },
                [env.VITE_BASE_API1]: {
                    target: env.VITE_PROXY_API,
                    changeOrigin: true,
                },
                [env.VITE_BASE_API2]: {
                    target: env.VITE_PROXY_API,
                    changeOrigin: true,
                },
                [env.VITE_BASE_API3]: {
                    target: env.VITE_PROXY_API,
                    changeOrigin: true,
                },
                // [env.VITE_BASE_UPLOADS]: {
                //     target: env.VITE_PROXY_UPLOADS,
                //     changeOrigin: true,
                // },
            },
        },
        build: {
            chunkSizeWarningLimit: 1500,
        },
        plugins: [
            vue(),
            legacy({
                targets: ['defaults', 'not IE 11'],
            }),
        ],
        css: {
            preprocessorOptions: {
                scss: {
                    // 关闭编译时 字符编码 报错问题
                    charset: false,
                },
            },
        },
    };
});

vite.config文件中引入的.env文件配置如下

由于此项目我们使用到了多个baseapi 前缀，故此处配置多个

VITE_APP_TITLE=我的项目名
VITE_PROXY_API=https://xxxxx.com 
VITE_PORT=9521
VITE_PUBLIC_PATH=./
VITE_BASE_API=/ctx-coop-member
VITE_BASE_API1=/ctx-coop-user
VITE_BASE_API2=/ctx-coop-portal
VITE_BASE_API3=/ctx-coop-finance

原网址: 访问
创建于: 2024-08-14 09:48:36
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论