智能风险后台管理系统问题记录

1. 编辑和新增页面公用组件中的表单组件.编辑的时候, 拿到详情信息,传入组件,进行表单赋值useEffect中依赖项数组只填入id,拿到的数据不是最新的. 需要传入detail详情.

2. 项目部署到测试环境遇到的坑,测试环境使用的是宝塔管理系统.将打包后的文件目录上传到服务器上面的文件夹中.通过IP+目录的方式访问项目.

3. 项目代码里面需要配置路由的basename(基础目录),使用的是routerv6版本,否则的话,打包后上传到服务器上面一直对应不上.

路由增加basename统一前缀

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
<Router basename="/risk_web/">
</Router>

4. 为了使本地项目启动的时候,也加上二级目录,可以修改vite.config.js中的配置base即可,本地访问也会加上目录路径
5. 另外还有一点比较坑的问题,项目中已经设置了国际化为中文的配置. Vite打包后,上传到服务器.发现失效. 原因是:

因为Vite不支持 serve umd,必须是 ES module. vite 打包会对 cjs 处理，导致无法正确引入。 推荐 vite 用户使用 antd/es/locale 引入 locale 文件。

import zhCn from 'antd/es/locale/zh_CN';

6. 下载文件,后缀多了_ 利用正则匹配替换,将双引号替换为空即可 a.download = fileName.replace(new RegExp('"', "g"), ""); // 设置a标签的下载属性

 // 配置项: (使Label在内容里面)
option = {
  grid: {
    containLabel: true,
  },
xAxis: {
    type: 'category',
    data: [
    '标签标签标签标签标签标签标签标签标签1', 
    '标签标签标签标签标签标签标签标签标签2', 
    '标签标签标签标签标签标签标签标签标签3', 
    '标签标签标签标签标签标签标签标签标签4', 
    '标签标签标签标签标签标签标签标签标签5', 
    '标签标签标签标签标签标签标签标签标签6', 
    '标签标签标签标签标签标签标签标签标签7'
    ],
    axisLabel:{
      rotate: 45, // 设置文字倾斜(旋转)
      interval: 0
    },
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
     barWidth:40,
    }
  ]
}; 

7.对于本地环境和生产环境,不同的环境,我们可能会使用不同的一些环境变量,可以使用dotenv包来处理,在项目根目录文件夹下面新建.env.xxx的文件.然后再配置文件中引入dotenv 进行相关的配置,运行/或者构建的时候,会根据不同的环境引入不同的环境变量配置文件.