RBAC前端架构-03：创建dotenv及config配置

1-dotenv

1-1.概念

在 Vue 项目中，.env.xxx文件是环境配置文件，用于管理不同环境下的配置变量

1-2.作用

.env.xxx 文件用于定义不同环境（如开发、测试、生产）下的环境变量
这些变量可以在项目构建时被注入到 process.env 对象中，供应用程序使用

1-3.常见命名规则

Vue CLI 支持以下几种常见的 .env 文件命名方式：

文件名	适用环境	描述
.env	所有环境	默认环境变量，适用于所有环境。
.env.local	所有环境（本地）	本地覆盖文件，不会被 Git 提交。
.env.development	开发环境	仅在开发环境下生效。
.env.production	生产环境	仅在生产环境下生效。
.env.test	测试环境	仅在测试环境下生效。

1-4.过程

Vue CLI 在构建过程中会自动将 .env 文件中的变量注入到process.env对象中
只有以VUE_APP_开头的变量才会被注入到客户端代码中
这些变量在应用运行时可以通过process.env.VARIABLE_NAME访问

1-5.文件调整

新增frontend-vue2\.env.development

#Vue CLI 在构建过程中会自动将 .env 文件中的变量注入到 process.env 对象中
#只有以 VUE_APP_ 开头的变量才会被注入到客户端代码中
#这些变量在应用运行时可以通过 process.env.VARIABLE_NAME 访问
NODE_ENV=development
VUE_APP_API_BASE_URL=http://localhost:8080/api
VUE_APP_DEBUG=true
新增frontend-vue2\.env.production

NODE_ENV=production
VUE_APP_API_BASE_URL=http://175.24.130.242/api
VUE_APP_DEBUG=false

2-config文件

用于统一管理系统的基本参数配置

新增frontend-vue2\src\config\index.js

js 复制代码

export default {
  // process.env 是 Node.js 提供的全局对象，用于访问系统环境变量
  baseURL: process.env.VUE_APP_API_BASE_URL || "http://localhost:8080/api",
  // 自定义debug标识
  debug: process.env.VUE_APP_DEBUG === "true",
  // 过期时间
  timeout: process.env.VUE_APP_TIMEOUT
    ? parseInt(process.env.VUE_APP_TIMEOUT)
    : 5000,
};

修改frontend-vue2\src\api\request.js，axios请求封装使用config的环境变量

js 复制代码

// axios 封装
import axios from "axios";
import store from "@/store";
import router from "@/router";
import config from "@/config";// 引入config

// 创建 axios 实例
const service = axios.create({
  // 使用环境变量配置
  baseURL: config.baseURL,
  // 请求超时时间
  timeout: config.timeout || 5000,
});

// 请求拦截器：每次请求都带上 token
service.interceptors.request.use(
  (config) => {
    // 从Vuex 获取 token
    const token = store.state.token;
    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器：统一处理错误
service.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    if (error.response && error.response.status === 401) {
      // 401 未授权，说明 token 过期或无效
      store.dispatch("logout");
      router.push("/login");
    }
    return Promise.reject(error);
  }
);

export default service;