Vue配置代理解决跨越问题

最新推荐文章于 2025-09-16 00:32:09 发布

原创最新推荐文章于 2025-09-16 00:32:09 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webpack

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Vue项目中配置代理，包括全局代理设置、按服务配置代理及使用pathRewrite属性进行路径重写的方法。

一、配置全局统一的代理

在vue工程的vue.config.js（如没有则新建该文件）文件下，添加如下配置：

module.exports = defineConfig({
    devServer: {
        proxy: 'https://emsrot.com/uat-ssd'
    }
})

表示所有的接口都代理到https://emsrot.com/uat-ssd/****

二、按照不同的服务配置不同的代理

module.exports = defineConfig({
    devServer: {
        proxy: {
            '/fileUpload': {
                target: 'https://emsrot.com/uat-ssd',
                secure: false,
                changeOrigin: true,
            },
            '/mobile': {
                target: 'https://emsrot.com/uat-mobile',
                secure: false,
                changeOrigin: true,
            }
        }
    }
})

表示所有 以/fileUpload 开头的接口将请求到 https://emsrot.com/uat-ssd/fileUpload/，
所有以/mobile 开头的接口将请求到 https://emsrot.com/uat-ssd/mobile/

三、增加 pathRwrite属性

module.exports = defineConfig({
    devServer: {
        proxy: {
            '/fileUpload': {
                target: 'https://emsrot.com/uat-ssd',
                secure: false,
                changeOrigin: true,
                pathRwrite: {
                    "^/fileUpload": '' // ^/fileUpload是正则
                },
            }
        }
    }
})