环境配置

.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和端口。