【Vue.js】对Vue-element-admin做代理网关转发proxy配置

最新推荐文章于 2025-04-10 18:06:14 发布

我的钱包空指针了

最新推荐文章于 2025-04-10 18:06:14 发布

阅读量1.1k

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_44922964/article/details/131104222

版权

Vue.js 专栏收录该内容

13 篇文章

订阅专栏

文章介绍了如何配置Vue项目的环境变量，如.env.development和.env.production，以及在vue.config.js中设置devServer和proxy，用于处理开发环境和生产环境的API请求。在开发环境中使用MockJS模拟数据，生产环境中通过proxy实现对SpringCloud微服务架构中API的转发，确保请求通过网关进行。

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

环境配置

在这里插入图片描述

.env.development # 开发环境
.env.production # 生产环境

我们需要在两个环境变量文件中配置

VUE_APP_BASE_API = '/dev' # 这里配置全局的API前置标识 开发环境我使用的/dev  生产环境用的是/prod
VUE_APP_BASE_URL = 'http://127.0.0.1:7000' # 这是基础BaseUri 主要给axios使用的

配置vue.config.js

 devServer: {
    port: port,
    open: false,
    overlay: {
      warnings: false,
      errors: true
    },
    // before: require('./mock/mock-server.js')   这是mockjs 在实际开发中前后端分离的场景可以使用，其他场景可以关闭
    proxy: {
    // 开发环境的标识  
      ['/dev']: {  
        target: process.env.VUE_APP_BASE_URL,
        changeOrigin: true,
        ws: true,
        secure: false,
        pathRewrite: {
        // 由于我们不需要接口帮我们拼接/dev/v1/api/** 可以在这里重写路径，选择追加或者不追加或者追加其他的前置path标识
          ["^" + process.env.VUE_APP_BASE_API]: ""
        }
      },
      ['/prod']: {
        target: process.env.VUE_APP_BASE_URL,
        changeOrigin: true,
        ws: true,
        secure: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: ""
        }
      },

    }
  },

演示

开发环境
生产环境

为啥要这么做呢？

理论上我们本地打包后dist都是直接放在后台SpringBooot的resource/static目录下启动项目可以直接访问，由于做的SpringCloud微服务，这里就把网关和后台管理给分开了，网关做统一转发，等于说网关是唯一如果，这时候我们在把dist放在resource/static目录下，就会造成资源不从网关中，通过proxy直接访问的是后台管理模块的IP和端口。