gzcx-web

7.0 KiB

Raw Permalink Blame History

提示

该仓库使用vben最新版本v5开发

v5版本采用分仓(包)目录结构, 具体开发路径为: 根目录/apps/web-antd

目前对应后端版本: 分布式5.3.0/微服务2.2.2

简介

组件/框架	版本
vben	5.5.3
ant-design-vue	4.2.6
vue	3.5.13

文档

Vben V5 文档地址

安装使用

前置准备环境(只能用pnpm)

"packageManager": "pnpm",
"engines": {
  "node": ">=20.15.0",
  "pnpm": "latest"
},

获取项目代码

git clone http://git.helou.vip:8088/ruansi/Vben5-Base.git

安装依赖

cd Vben5-Base

pnpm install

关于一些监控的地址配置(微服务版本可以跳过这一小节)

使用RuoYi-Vue-Plus注意 已经去除 admin/snailjob 的.env 配置 可自行修改有两种方式

修改源码/views/monitor/admin views/monitor/snailjob

<!-- 修改地址 -->
<template>
  <iframe
    class="size-full"
    src="http://localhost:9090/admin/applications"
  ></iframe>
</template>

推荐使用菜单自行配置 (跟 cloud 版本打开方式一致)

使用内嵌 iframe 方式需要解决跨域问题可参考nginx.conf配置

修改.env.development 配置文件
注意 RSA 公私钥一定要修改和后端匹配
RSA 公私钥为两对 前端请求加密-后端解密是一对 后端响应加密前端解密是一对

# 端口号
VITE_PORT=5666
# 打包路径
VITE_BASE=/
# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
VITE_NITRO_MOCK=false
# 是否打开 devtools，true 为打开，false 为关闭
VITE_DEVTOOLS=false
# 是否注入全局loading
VITE_INJECT_APP_LOADING=true

# 后台请求路径 具体在vite.config.mts配置代理
VITE_GLOB_API_URL=/api
# 全局加密开关(即开启了加解密功能才会生效 不是全部接口加密 需要和后端对应)
VITE_GLOB_ENABLE_ENCRYPT=true
# RSA公钥 请求加密使用 注意这两个是两对RSA公私钥 请求加密-后端解密是一对 响应解密-后端加密是一对
VITE_GLOB_RSA_PUBLIC_KEY=
# RSA私钥 响应解密使用 注意这两个是两对RSA公私钥 请求加密-后端解密是一对 响应解密-后端加密是一对
VITE_GLOB_RSA_PRIVATE_KEY=
# 客户端id
VITE_GLOB_APP_CLIENT_ID=e5cd7e4891bf95d1d19206ce24a7b32e
# 开启WEBSOCKET
VITE_GLOB_WEBSOCKET_ENABLE=false

运行

pnpm dev:antd

打包

pnpm build:antd

这是一个特性而不是一个bug!

菜单管理可分配但只有admin/superadmin角色能访问其他角色访问会到403页面
租户相关菜单可分配但只有superadmin角色能访问其他角色访问会到403页面
分配的租户管理员无法修改自己的角色的菜单(即管理员角色的菜单) 防止自己把自己权限弄没了

浏览器支持

最低适配应该为Chrome 88+以上浏览器详见 css - where

本地开发推荐使用Chrome 最新版本浏览器

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

常见问题解决

修改接口请求超时时间

在此文件修改packages/effects/request/src/request-client/request-client.ts中的defaultConfig对象的timeout属性值即可，单位为毫秒。默认为10秒

const defaultConfig: RequestClientOptions = {
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
  responseReturn: 'raw',
  // 默认超时时间
  timeout: 10_000,
};

打包部署nginx的配置文件

    location / {
        root  html;
        try_files $uri $uri/ /index.html;
        # 不缓存html，防止程序更新后缓存继续生效
        if ($request_filename ~* .*\.(?:htm|html)$) {
          add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
          access_log on;
        }
        index  index.html index.htm;
    }
    location /prod-api/ {

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 后台接口地址
        proxy_pass http://192.168.0.58:8081/prod-api;
        rewrite "^/prod-api/(.*)$" /$1 break;
        proxy_redirect default;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

        # --- 解决 SSE 错误的关键配置 ---

        # 1. 必须使用 HTTP 1.1，默认是 1.0，不支持长连接
        proxy_http_version 1.1;

        # 2. 清空 Connection Header，允许保持长连接
        proxy_set_header Connection "";

        # 3. 关闭缓存，防止 Nginx 拦截流式输出
        proxy_buffering off;
        proxy_cache off;

        # 4. 延长超时时间（非常重要）
        # SSE 如果长时间没有数据传输，Nginx 会主动断开，默认通常是 60s
        # 设置大一点，防止因长时间没消息导致 ERR_INCOMPLETE_CHUNKED_ENCODING
        proxy_read_timeout 86400s;
        proxy_send_timeout 86400s;
    }

左侧带有机构树的导出条件不生效

导出接口需要传递当前机构id

  function handleDownloadExcel() {
    commonDownloadExcel(
      userExport, '用户管理',  
      {...tableApi.formApi.form.values,workDeptId: selectDeptId.value[0]}, 
      {fieldMappingTime: formOptions.fieldMappingTime,}
    );
  }

首页现有两个菜单如果仅想显示一个

则需要修改apps\web-antd\src\router\routes\local.ts中的本地路由数组

  export const localMenuList: RouteRecordStringComponent[] = [
    {
      component: 'BasicLayout',
      meta: {
        order: -1,
        title: '数据总览',
        // 不使用基础布局（仅在顶级生效）
        noBasicLayout: true,
        hideChildrenInMenu: true,
        icon: 'ic:baseline-house',
      },
      name: 'Dashboard',
      path: '/',
      redirect: '/analytics',
      children: [
        {
          name: 'Analytics',
          path: '/analytics',
          component: '/dashboard/analytics/index',
          meta: {
            affixTab: true,
            icon: 'ic:baseline-house',
            title: '数据总览',
          },
        },
      ],
    },
    ...localRoutes,
  ];

7.0 KiB Raw Permalink Blame History Unescape Escape

提示

简介

文档