jigangSCM2

4.9 KiB

Raw Blame History Unescape Escape

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

一环境要求

1.1 开发环境

操作系统：Windows 10/11，MacOS；
Node 16.15.0 及以上版本(某些情况下可能需要安装 Python3 环境)；
pnpm v8.1.0及以上版本；
浏览器推荐使用 Chrome 90及以上版本；
Visual Studio Code (简称VSCode)

1.2 运行环境

Nginx 1.18.0 及以上版本或 TongHttpServer 6.0 (信创环境)

二浏览器支持

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

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

三关联项目

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

项目	分支	分支(Coding)	说明
后端(任一后端服务)
jnpf-java-boot	v3.5.x	v3.5.0-stable	Java单体项目源码
jnpf-java-cloud	v3.5.x	v3.5.0-stable	Java微服务项目源码
jnpf-dotnet	v3.5.x	v3.5.0-stable	.NET单体项目源码
jnpf-dotnet-cloud	v3.5.x	v3.5.0-stable	.NET微服务项目源码
前端
jnpf-web-datascreen-vue3	v3.5.x	v3.5.0-stable	大屏前端项目源码(Vue3)
jnpf-web-datareport	v3.4.7	v3.4.7-stable	报表前端项目源码
jnpf-web-datareport-cloud	v3.4.7	v3.4.7-stable	报表前端项目源码(jnpf-java-cloud项目专用)

四使用说明

4.1 开发环境

4.1.1 安装pnpm

推荐使用 pnpm，若使用 yarn ，建议使用 Yarn v1.22.x 版本，否则可能出现依赖安装失败的情况。

在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 安装依赖

使用如下命令安装项目依赖

pnpm install

4.1.3 后端接口配置

修改项目根目录 .env.development 中的后端接口地址

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

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

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

4.1.4 关联项目配置

打开 /src/hooks/setting/index.ts 配置文件，默认配置如下所示

需要特别注意的是，如果用的是 jnpf-java-cloud 的后端，需要将第30行注释，取消注释第28行代码，其他的默认配置即可

...
const glob: Readonly<GlobConfig> = {
    title: VITE_GLOB_APP_TITLE,
    apiUrl: VITE_GLOB_API_URL,
    shortName: VITE_GLOB_APP_SHORT_NAME,
    urlPrefix: VITE_GLOB_API_URL_PREFIX,
    uploadUrl: VITE_GLOB_API_URL + '/api/file/Uploader',
    webSocketUrl: VITE_GLOB_WEBSOCKET_URL,
    // 本地文件预览
    filePreviewServer: isDevMode() ? 'http://localhost:30090' : VITE_GLOB_API_URL + '/FileServer',
    // 大屏应用前端路径
    dataVUrl: isDevMode() ? 'http://localhost:8100/DataV/' : prodUrlPrefix + '/DataV/',
    // 数据报表接口-java cloud
    // reportServer: isDevMode() ? 'http://localhost:30000' : VITE_GLOB_API_URL,
    // 数据报表接口-java boot
    reportServer: isDevMode() ? 'http://localhost:30007' : VITE_GLOB_API_URL + '/ReportServer',
    // 报表前端路径
    report: isDevMode() ? 'http://localhost:8200' : VITE_GLOB_API_URL + '/Report',
};
...

4.1.5 本地运行

完成上述操作后，使用如下命令运行前端项目

pnpm dev

4.2 运行环境

测试或生产环境

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

pnpm build

然后将项目根目录下 /dist/ 中所有的文件上传至服务器。

五常见问题

5.1 修改项目基本信息

打开项目根目录 .env 文件，可以看到 本地运行端口号、网站标题、简称 等配置。

# 端口号
VITE_PORT = 3100

# 网站标题
VITE_GLOB_APP_TITLE = JNPF快速开发平台

# 简称，用于配置文件名字 不要出现空格、数字开头等特殊字符
VITE_GLOB_APP_SHORT_NAME = jnpf

5.2 在运行环境(测试或生产环境)报ak设置问题

错误信息如下所示

APP Referer校验失败。请检查该ak设置的白名单与访问所有的域名是否一致。详情查看：http://bsyun.baidu.com/apiconsole/key#。

需要去百度地图开发平台（https://lbsyun.baidu.com/）申请一个账号，然后修改 src/views/extend/map/index.vue 第8行代码中 ak 的值。

5.3 代码更新后报错

在开发或打包时报依赖缺失，可以先删除项目根目录下的 pnpm-lock.yaml 文件，然后重新执行 pnpm install 安装依赖即可解决。

4.9 KiB Raw Blame History Unescape Escape

一 环境要求