vue配置代理（vue.config.js）

最新推荐文章于 2025-06-25 16:04:19 发布

星屿H

最新推荐文章于 2025-06-25 16:04:19 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_48294048/article/details/130382196

本文详细介绍了如何在Vue.js项目中设置代理，通过`vue.config.js`文件实现跨域请求，解决开发环境中API调用的问题。内容包括代理的基本概念、配置语法以及常见应用场景。

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

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    //如果是hash模式， publicPath:""；如果是history， publicPath:"/"
    publicPath: "/",
    //打包的文件夹目录
    outputDir: "dist",
    // 打包之后的入口文件
    indexPath: "index.html",
    //静态资源目录
    assetsDir: "assets",
    //配置代理
    devServer: {
        proxy: {
            // "/api": {
            //     target: "http://hyzc-gateway-dev.apps.bjdev.ocpx.cnooc",
            //     ws: true,
            //     changeOrigin: true
            // },
            // 两种写法都可以
            // 代理请求， 匹配所有以/uums开头的请求
            "/uums": {
                // 目标服务器，所有以/uums开头的请求接口代理到目标服务器
                target: "http://hyzc-gateway-dev.apps.bjdev.ocpx.cnooc", //代理的地址(ip+端口号)
                ws: true,
                changeOrigin: true,//是否跨域
                // 重写路径，此时用于匹配反向代理的/uums可以替换为空 也可以理解为（ “/uums”代替target里面的地址，后面组件中我们调接口是直接用uums代替）
                // {比如我要调用 ‘http://hyzc-gateway-dev.apps.bjdev.ocpx.cnooc/user/info’  直接写成 ‘/uums/user/info’}
                pathRewrite: {
                    "^/uums": ""
                },
            },
            '/hyzcBusi': {
                target: 'http://hyzc-gateway-dev.apps.bjdev.ocpx.cnooc/hyzcBusi',
                changeOrigin: true,
                pathRewrite: {
                    '^/hyzcBusi': ''
                }
            }
        }
    }
})