Vue配置代理解决跨越问题_module.exports = defineconfig({-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaonankeji/article/details/127302831

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、配置全局统一的代理

在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是正则
                },
            }
        }
    }
})