项目配置说明

配置文件

src/config/project.ts - 项目全局配置

重要配置项

1. 项目名称

export const PROJECT_NAME = '产业带独立站供应商管理系统';

⚠️ 重要： 这个名称必须与 JeecgBoot 前端的项目名称完全一致，否则无法共享登录态！

2. 环境标识

export const ENV_MODE = import.meta.env.MODE === 'production' ? 'PRODUCTION' : 'DEVELOPMENT';

PRODUCTION - 生产环境
DEVELOPMENT - 开发环境

自动根据 Vite 的环境变量切换。

3. 项目版本

export const PROJECT_VERSION = '1.0.0';

版本号，建议与 JeecgBoot 前端保持一致。

4. Persistent Key 生成

export function generatePersistentKey(): string {
  return `${PROJECT_NAME}__${ENV_MODE}__${PROJECT_VERSION}__${CACHE_TYPE}__${STORAGE_TYPE}__KEY__`;
}

生成规则：

{项目名}__{环境}__{版本}__COMMON__LOCAL__KEY__

示例：

生产环境：产业带独立站供应商管理系统__PRODUCTION__1.0.0__COMMON__LOCAL__KEY__
开发环境：产业带独立站供应商管理系统__DEVELOPMENT__1.0.0__COMMON__LOCAL__KEY__

如何确保与 JeecgBoot 兼容

步骤 1：查看 JeecgBoot 的配置

在 JeecgBoot 前端项目中找到 src/settings/projectSetting.ts 或类似文件，查看：

// JeecgBoot 的配置示例
export default {
  title: '产业带独立站供应商管理系统',  // 项目名称
  // ...
}

步骤 2：查看实际的 localStorage key

在 JeecgBoot 前端登录
打开浏览器开发者工具
Application → Local Storage
找到类似 xxx__PRODUCTION__1.0.0__COMMON__LOCAL__KEY__ 的 key
复制这个 key 的项目名称部分

步骤 3：更新 React 项目配置

修改 src/config/project.ts：

// 使用与 JeecgBoot 完全相同的项目名称
export const PROJECT_NAME = '你从JeecgBoot看到的项目名称';

步骤 4：验证

在 React 项目登录
查看 localStorage，应该能看到相同的 key
跳转到 JeecgBoot 前端，应该自动登录 ✅

环境变量

可以通过环境变量覆盖配置：

.env.development

VITE_APP_TITLE=产业带独立站供应商管理系统
VITE_APP_VERSION=1.0.0

.env.production

VITE_APP_TITLE=产业带独立站供应商管理系统
VITE_APP_VERSION=1.0.0

然后在 project.ts 中使用：

export const PROJECT_NAME = import.meta.env.VITE_APP_TITLE || '产业带独立站供应商管理系统';
export const PROJECT_VERSION = import.meta.env.VITE_APP_VERSION || '1.0.0';

常见问题

Q1: 为什么登录后跳转到 JeecgBoot 还是要重新登录？

A: 检查以下几点：

项目名称是否完全一致（包括空格、标点符号）
环境标识是否一致（PRODUCTION/DEVELOPMENT）
版本号是否一致
域名是否相同（localStorage 不能跨域）

Q2: 如何查看当前使用的 Persistent Key？

A: 在浏览器控制台运行：

import { generatePersistentKey } from './src/config/project';
console.log(generatePersistentKey());

或者直接查看 localStorage：

Object.keys(localStorage).filter(key => key.includes('__COMMON__LOCAL__KEY__'));

Q3: 开发环境和生产环境使用不同的 key 吗？

A: 是的，默认配置下：

开发环境：xxx__DEVELOPMENT__xxx
生产环境：xxx__PRODUCTION__xxx

这样可以避免开发和生产环境的数据冲突。

Q4: 可以自定义 key 的格式吗？

A: 可以，但不推荐。如果要自定义，需要同时修改 JeecgBoot 前端的配置，确保两边一致。

最佳实践

保持一致性：React 项目和 JeecgBoot 前端使用完全相同的配置
使用环境变量：通过 .env 文件管理不同环境的配置
版本管理：项目升级时同步更新版本号
文档记录：在团队文档中记录项目名称和配置规则

调试技巧

查看所有 localStorage 数据

for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, '=', localStorage.getItem(key));
}

清除所有缓存

localStorage.clear();

查看 Persistent 数据结构

const key = '产业带独立站供应商管理系统__PRODUCTION__1.0.0__COMMON__LOCAL__KEY__';
const data = JSON.parse(localStorage.getItem(key));
console.log(JSON.stringify(data, null, 2));

PROJECT_CONFIG.md 4.5 KB Riwayat Mentahan