RBAC前端架构-04：设置代理及开发配置

未来龙皇小蓝2026-02-18 16:22

1-文件调整

修改frontend-vue2\src\config\index.js

js 复制代码

// src/config/index.js
export default {
  // process.env 是 Node.js 提供的全局对象，用于访问系统环境变量
  baseURL: 
  // 开发环境使用代理，生产环境使用完整地址
  process.env.NODE_ENV === "development"
    ? "/api" // 本地开发走代理
    :
  process.env.VUE_APP_API_BASE_URL, // 生产环境用完整后端地址
  // 自定义debug标识
  debug: process.env.VUE_APP_DEBUG === "true",
  // 过期时间
  timeout: process.env.VUE_APP_TIMEOUT
    ? parseInt(process.env.VUE_APP_TIMEOUT)
    : 5000,
};

修改\frontend-vue2\vue.config.js

js 复制代码

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  // TODO 禁用保存时的 ESLint 检查
  lintOnSave: false,
  // 本地开发服务器配置
  devServer: {
    port: 10086,
    host: "localhost",
    // 自动打开浏览器
    open: true,
    // 添加代理配置解决跨域问题
    proxy: {
      // 当前端请求以 /api 开头的路径时，会触发代理
      "/api": {
        // 将匹配到的请求转发到这个地址（通常是后端服务）
        target: "http://localhost:8080",
        // 修改请求头中的 origin 字段，使后端认为这是同源请求
        changeOrigin: true,
        pathRewrite: {
          // 如果配置为 "^/api": "/backend"，则 /api/auth/login 会变成 /backend/auth/login
          // pathRewrite 规则应用：/api/auth/login → /api/auth/login (路径不变)
          "^/api": "/api",
        },
      },
    },
  },
});

2-作用

关闭不必要的 ESLint 检查
设置开发服务器的运行参数
通过代理解决跨域问题，让前后端联调更加顺畅