yuhdemo/jnpf-java-boot/jnpf-web/README.md
2026-01-30 14:02:18 +08:00

4.8 KiB
Raw Permalink Blame History

一 环境要求

1.1 开发环境

  • 操作系统:Windows 10/11MacOS
  • Node.js v12/v4/v16(v16 版本某些情况下可能需要安装 Python3 环境)
  • 浏览器推荐使用 Chrome 90 及以上版本;
  • Visual Studio Code(简称 VSCode)

1.2 运行环境

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

二 关联项目

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

项目 分支 分支(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 v3.5.x v3.5.0-stable 大屏前端项目源码
jnpf-web-datareport v3.4.7 v3.4.7-stable 报表前端项目源码
jnpf-web-datareport-cloud v3.4.7 v3.4.7-stable 报表前端项目源码(jnpf-java-cloud 项目专用)

三 使用说明

3.1 开发环境

3.1.1 安装依赖

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

npm install --registry http://registry.npmmirror.com

3.1.2 后端接口配置

修改 src/utils/apiUrl.js 中的后端接口地址

  • Java 项目本地开发默认地址:http://localhost:30000
  • .NET 项目本地开发默认地址:http://localhost:5000
module.exports = {
  // 开发环境接口配置
  APIURl: 'http://localhost:30000'
}

3.1.3 关联项目配置

打开 src/utils/define.js 配置文件,默认配置如下所示

需要特别注意的是,如果用的是 jnpf-java-cloud 的后端,需要将第 13 行注释,取消注释第 15 行代码。

const { APIURl } = require('./apiUrl')

module.exports = {
  APIURl,
  timeout: process.env.NODE_ENV === 'development' ? 1000000 : 1000000,
  comUploadUrl: process.env.VUE_APP_BASE_API + '/api/file/Uploader',
  comUrl: process.env.VUE_APP_BASE_API,
  // 本地文件预览
  filePreviewServer: process.env.NODE_ENV === 'development' ? 'http://localhost:30090' : process.env.VUE_APP_BASE_API + '/FileServer',
  // 大屏应用前端路径
  dataV: process.env.NODE_ENV === 'development' ? 'http://localhost:8100/DataV' : window.location.origin + '/DataV',
  // 数据报表接口-java boot
  reportServer: process.env.NODE_ENV === 'development' ? 'http://localhost:30007' : process.env.VUE_APP_BASE_API + '/ReportServer',
  // 数据报表接口-java cloud
  //reportServer: process.env.NODE_ENV === 'development' ? 'http://localhost:30000' : process.env.VUE_APP_BASE_API,
  // 报表前端
  report: process.env.NODE_ENV === 'development' ? 'http://localhost:8200' : process.env.VUE_APP_BASE_API + '/Report'
}

3.1.4 本地运行

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

npm run dev

3.2 运行环境

测试或生产环境

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

npm run build

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

四 常见问题

4.1 修改项目基本信息

打开项目根目录 vue.config.js 文件,可以看到 本地运行端口号网站标题 等配置。

# 修改网站标题第11行
const name = defaultSettings.title || 'JNPF快速开发平台'

# 修改本地运行端口第18行
const port = process.env.port || process.env.npm_config_port || 3000

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

错误信息如下所示

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

若没有使用百度地图的需求,可以注释 public/index.html 中第 12 行代码, 若有使用百度地图的需求,先去 百度地图开发平台(https://lbsyun.baidu.com/)申请一个账号,然后 修改 public/index.html 第 12 行代码中 ak 的值。

4.3 代码更新后报错

在开发或打包时报依赖缺失,可以先删除项目根目录下的 package-lock.json 文件,然后重新执行 npm install --registry http://registry.npmmirror.com 安装依赖即可解决。