~tanyong/JNPF_ITMS_Web.git

编辑 | blame | 历史 | 原始文档

特别说明：源码、JDK、数据库、Redis等安装或存放路径禁止包含中文、空格、特殊字符等

一环境要求

1.1 开发环境

操作系统：Windows 10/11，MacOS；
Node 20.15.0 及以上版本(某些情况下可能需要安装 Python3 环境)；
pnpm v9.12.0及以上版本；
Visual Studio Code (简称 VSCode)

1.2 运行环境

Nginx 建议使用 1.18.0 及以上版本、兼容 OpenResty 或 TongHttpServer 6.0(国产信创)

二浏览器支持

支持现代浏览器，不支持 IE

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

三关联项目

需要使用下表中的对应分支

项目	分支	说明
后端(任一后端服务)
jnpf-java-boot	v6.1.x-stable	Java 单体项目源码
jnpf-java-cloud	v6.1.x-stable	Java 微服务项目源码
jnpf-dotnet	v6.1.x-stable	.NET 单体项目源码
jnpf-dotnet-cloud	v6.1.x-stable	.NET 微服务项目源码
前端
jnpf-web-datareport	v6.1.x-stable	报表前端项目源码
jnpf-web-datascreen-vue3	v6.1.x-stable	大屏前端项目源码(Vue3)
jnpf-web-monorepo-framework	v6.1.x-stable	前端核心项目源码
jnpf-bpmn	v1.1.x-stable	前端流程设计器源代码
jnpf-univer	v1.0.x-stable	前端Univer报表设计器源代码

四使用说明

4.1 开发环境

4.1.1 安装 pnpm

在 Windows 的 PowerShell 中执行如下命令

iwr https://get.pnpm.io/install.ps1 -useb | iex

MacOS 通过 Homebrew 安装 pnpm
若已经安装了 Homebrew 软件包管理器，则可以使用如下命令赖安装 pnpm：

brew install pnpm

也可以通过 npm 安装 pnpm

npm install -g pnpm
或
npm install -g @pnpm/exe

4.1.2 源码准备

需按如下步骤操作，否则项目无法运行

a. 拉取项目
分别拉取如下项目源码(注意对应版本号)：
- jnpf-web-monorepo-framework：前端核心项目源码
- jnpf-web-apps-main：前端主项目源码
- jnpf-bpmn：前端流程设计器源代码
- jnpf-univer：前端Univer报表设计器源代码

b. 复制项目：
- 将 jnpf-web-apps-main 项目复制至 jnpf-web-monorepo-framework 项目的 apps/ 目录下
- 将 jnpf-bpmn 项目复制至 jnpf-web-monorepo-framework 项目的 packages/jnpf/plugins/ 目录下
- 将 jnpf-univer 项目复制至 jnpf-web-monorepo-framework 项目的 packages/jnpf/plugins/ 目录下

最终核心结构如下：

注意：下述结构中，涉及的文件夹目录不可修改

├── jnpf-web-monorepo-framework 
│   ├── apps
│   ├──   ├── jnpf-web-apps-main  注意：此处文件夹名称不可修改
│   ├── packages
│   ├──   ├── jnpf
│   ├──   ├──   ├── plugins
│   ├──   ├──   ├──   ├── jnpf-bpmn 注意：此处文件夹名称不可修改
│   ├──   ├──   ├──   ├── jnpf-univer 注意：此处文件夹名称不可修改

4.1.3 安装依赖

进入 jnpf-web-monorepo-framework 根目录，使用如下命令安装项目依赖

pnpm install

4.1.4 后端接口配置

修改 jnpf-web-monorepo-framework/apps/jnpf-web-apps-main/.env.development 中的后端接口地址和websocket地址

Java 项目本地开发默认接口地址：http://localhost:30000
.NET 项目本地开发默认接口地址：http://localhost:5000

# 后端接口
VITE_PROXY = [["/dev","http://localhost:30000"]]

# websocket地址
# 在本地开发环境，将后端默认接口地址的协议改成 ws 即可
VITE_GLOB_WEBSOCKET_URL='ws://localhost:30000'

4.1.5 关联项目配置

打开 jnpf-web-monorepo-framework/apps/jnpf-web-apps-main/.env 配置文件，默认配置如下所示

...
# 密钥
VITE_CIPHER_KEY=自行修改
# 高德地图相关key
VITE_A_MAP_JS_KEY=自行修改
VITE_A_MAP_WEB_KEY=自行修改
VITE_A_MAP_SECURITY_JS_CODE=自行修改
...

4.1.6 本地运行

完成上述操作后，在 jnpf-web-monorepo-framework 根目录使用如下命令运行前端项目

pnpm dev

4.2 运行环境

测试或生产环境

如果需要测试或生产环境发布，使用如下命令打包项目

pnpm build

然后将项目根目录下 jnpf-web-monorepo-framework/apps/jnpf-web-apps-main/dist/ 中所有的文件上传至服务器。

五常见问题

5.1 修改项目基本信息

打开项目根目录 jnpf-web-monorepo-framework/apps/jnpf-web-apps-main/.env 文件，可以看到 本地运行端口号 等配置。

# 端口号
VITE_PORT = 3000

5.2 代码更新后报错

在开发或打包时报依赖缺失，可以先删除 jnpf-web-monorepo-framework/apps/jnpf-web-apps-main/pnpm-lock.yaml 文件，然后重新执行 pnpm install 安装依赖即可解决。

一 环境要求