v3-lab-web

更新日期 2023/07/25

一.开发

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

浏览器访问 http://localhost:80

二.发布

# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

三.目录结构&打包配置&懒加载

1.为未来微前端版本铺垫,V3版本从新梳理了各模块关系,从新优化了功能模块配置,各个功能模块的api&asset&views都必须在各自的功能模块文件夹下

src下的目录结构示意如下

├─src
│  ├─api                     (接口文件夹下按模块划分)
│  │  └─basicsModules        (基础核心模块api)
│  │  └─hazardManagement     (危险源模块api)
│  ├─assets
│  │  └─ZDimages             (静态文件夹下按模块划分)
│  │     ├─basicsModules     (基础核心模块静态文件)
│  │     └─hazardManagement  (危险源模块静态文件)
│  └─views                   (页面文件夹下按模块划分)
│     └─basicsModules        (基础核心模块页面文件)
│     └─hazardManagement     (危险源模块页面文件)

2.同时优化了懒加载与打包,但是在加入新增模块时需要同时修改打包配置与加载配置文件

打包配置在 vue.config.js 文件内

├─src
│  └─vue.config.js

配置内容如下自行添加即可

//基础模块
basicsModules: {
  name: 'chunk-basicsModules',
  test: resolve('src/views/basicsModules'),
  priority: 0,
  minSize: 0,
  minChunks: 1,
  enforce:true,
  reuseExistingChunk: true
},

懒加载配置在 permission.js 文件内

├─src
│  └─store
│    └─modules
│      └─permission.js

配置内容如下自行添加即可

if(pathName === 'basicsModules'){
  return (resolve) => require([`@/views/basicsModules${pathUrl}`], resolve)
}else if(pathName === 'hazardManagement'){
  return (resolve) => require([`@/views/hazardManagement${pathUrl}`], resolve)
}

四.二维码相关

1.二维码生成规则

二维码参数由三部分组成

微信小程序二维码标识

需要在微信小程序后台开发配置中配置
同时需要在后台配置开发配置中配置 
两个配置需要完全一致
在用户登录后会存储在local storage中字段为'codeOnlineAdd'

参数 code

用于该功能所需参数

功能标识 type

用于识别二维码所属功能,用于后续跳转对应后续业务页面

示例

http://lab.zjznai.com/labAppTest?code=11&type=1
微信小程序二维码标识?参数&功能标识

2.功能标识表

功能标识	功能名称	备注
type == 10	实验室危险源	前端生成
type == 9	化学品	前端生成
type == 8	化学品柜	前端生成
type == 7	培训课程	前端生成
type == 6	专项检查	前端生成
type == 5	实验室详情	后端生成
type == 3	危险源列表	后端生成
type == 2	安全制度	后端生成
type == 1	MSDS说明书	前端端生成

五.版本相关

1.版本差异字段

配置文件在 .env.development 与 .env.production 文件内

├─src
│  └─.env.development         (开发配置)
│  └─.env.production          (打包配置)

VUE_APP_VERSION_DIFFERENCE_FIELD字段,可通过配置不同的字符来展示各版本差异化内容

 矿业大学-环测学院
 VUE_APP_VERSION_DIFFERENCE_FIELD = 'kuangYeDaXue_nanHu'
 苏州大学
 VUE_APP_VERSION_DIFFERENCE_FIELD = 'suZhouDaXue'
 西北农林大学
 VUE_APP_VERSION_DIFFERENCE_FIELD = 'xiBeiNongLinDaXue'

2.版本分支关系

#####修改时务必注意版本分支关系,从底层开始迭代

├─3.3.1-dspf (定时排风版本)
├─3.3.2-dzxxp (电子信息牌版本)
│  ├─suzhouDX-web (苏州大学-当前线上版本)
│  ├─suzhouDX-web (化工学院-当前线上版本)
│  └─suzhouDX-web (安全学院-当前线上版本)
├─3.3.4-kdyh (矿大优化版本)
│  └─nhkd-web (环测学院-当前线上版本)
├─3.3.3-AnQuanJianCha (新安全检查版本)
│  ├─3.3.5-BaoJingZhuaPai&DianHuaBaoJing (报警抓拍&电话报警版本)
│  └─3.3.6-zzjg&jzbj (组织架构&建筑布局版本)

3.多页面路由配置方法用于展示各版本差异化内容(即将废弃,留作备案)

3.1针对矿大项目修改 针对布局与疏散图 适配多楼栋 多楼层

路由配置示意

├─views
│  ├─comprehensive
│  │  └─laboratoryManagement
│  │     ├─building
│  │     │  └─indexOne.vue
│  │     └─subject
│  │         └─indexTwo.vue
│  └─emergencyManagement
│     └─evacuation
│        └─emergencyEvacuation
│            ├─indexOne.vue
│            └─performEvacuationOne.vue

静态路由修改项

path: '/emergencyEvacuationBig' 地址修改为  emergencyEvacuationBigOne  
path: '/' 地址修改为  home  

其他修改项

项目名称修改 => 实验室安全智能监测与控制系统
取消按钮首页注释  layout => components => Navbar.vue

3.2针对空军四医大项目 实验室-物联设备配置只有传感器与智能门禁

路由配置示意

├─views
│  ├─comprehensive
│  │  ├─laboratoryManagement
│  │  │  └─subject
│  │  │     └─indexOne.vue
│  │  ├─message
│  │  │  └─noticeconfig
│  │  │     └─indexOne.vue
│  │  ├─system
│  │  │  └─publicConfig
│  │  │     └─indexOne.vue
│  │  └─personnel
│  │     └─teacher
│  │        └─indexOne.vue
│  └─mine
│     └─indexOne.vue

静态路由修改项

path: '/login' 地址修改为  loginOne
path: '/' 地址修改为  loginOne

其他修改项

项目名称修改 => 危化品智能存储管理系统
按钮首页注释掉  layout => components => Navbar.vue