云办公BUG记录

HarryLee13
338 阅读3分钟

BUG记录

1. CRLF替换LF问题

报错信息

warning: LF will be replaced by CRLF in package-lock.json.

分析问题

LF和CRLF其实都是换行符，但是不同的是，LF是linux和Unix系统的换行符，CRLF是window 系统的换行符。这就给跨平台的协作的项目带来了问题，保存文件到底是使用哪个标准呢？ git为了解决这个问题，提供了一个”换行符自动转换“的功能，并且这个功能是默认处于”自动模式“即开启状态的。这个换行符自动转换会把自动把你代码里 与你当前操作系统不相同的换行的方式 转换成当前系统的换行方式（即LF和CRLF 之间的转换），这样一来，当你提交代码的时候，即使你没有修改过某个文件，也被git认为你修改过了，从而提示"LF will be replaced by CRLF in *****"

解决方法

git config core.autocrlf false (仅对当前git仓库有效）
git config --global core.autocrlf false (全局有效，不推荐设置全局）

2. npm无法安装ElementUI

报错信息

PS D:\桌面文件\前端学习\云办公\cloundoffice> npm i element-ui -S
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: cloundoffice@0.1.0
npm ERR! node_modules/vue
npm ERR!   vue@"^3.2.13" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.5.17" from element-ui@2.15.9
npm ERR! node_modules/element-ui
npm ERR!   element-ui@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\HARRY\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\HARRY\AppData\Local\npm-cache\_logs\2022-07-10T10_42_22_687Z-debug-0.log

分析问题：在安装组件的时候出现以上问题，npm版本问题报错

解决方法：在命令后面加上 --legacy-peer-deps

PS D:\桌面文件\前端学习\云办公\cloundoffice> npm i element-ui -S --legacy-peer-deps
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, 
feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 9 packages, and audited 855 packages in 37s

found 0 vulnerabilities

3. Vue3.x引入ElementUI后页面空白

出现问题：页面空白

分析问题：Vue3中使用createApp而没有创建app实例，安装插件的时候会报错

解决方法：

  1. 重新创建项目，回退Vue2.x版本
  2. 在Vue3中使用element-plus替代element-ui

4. 验证码逻辑问题

出现问题：登录界面一直显示登录中

分析问题：因为后端返回的状态码是500504，所以没有在原本的504判断中，直接返回Message.success({message: success.data.message})，提示√的验证码错误；并且拦截器不会返回success.data，原本是在有返回数据的判断块中将loading字段设置为false

解决方法：

  1. 在拦截器状态码为200的业务逻辑错误的判断条件中添加success.code==500504
axios.interceptors.response.use(success=>{
  if(success.status && success.status == 200){
    if( ... || success.data.code==500504){
      Message.error({message: success.data.message})
      return;
    }
    if(success.data.message){
      Message.success({message: success.data.message})
    }
  }
  return success.data;
}, error=>{
  ...
})
  1. 将loading放在postRequest().then(resp=>{...})中，而不是原本的postRequest().then(resp=>{if(resp){...}})中
submitLogin(){
  this.$refs.loginForm.validate((valid) => {
    if (valid) {
      this.loading = true;
      this.postRequest('/login/doLogin', this.loginForm).then(resp => {
          if(resp){
            ...
          }
          // 重置数据
          this.loading = false;
          this.updateCaptcha();
          this.loginForm.code = ''
        })
      } else {
        ...
      }
  });
}

5. npm ERR! peer vue@"^3.0.2" from vuex@4.0.2

报错信息

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: cloudoffice@0.1.0
npm ERR! Found: vue@2.7.4
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.14" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.2" from vuex@4.0.2
npm ERR! node_modules/vuex
npm ERR!   vuex@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\HARRY\AppData\Local\npm-cache\eresolve-report.txt for a full report.

分析问题：版本不匹配

解决办法：

  1. npm view vuex versions --json查版本，找适合的版本
  2. npm install vuex@3.6.2 --save

6. routes.forEach is not a function

报错信息：routes.forEach is not a function image.png image.png

分析问题：forEach中需要一个真正的数组；Array.from()就是将一个类数组对象或者可遍历对象转换成一个真正的数组。 将类数组对象转换为真正数组

解决办法：routes = Array.from(routes)

7. 导航栏出现所有

BUG信息： image.png

分析问题：后端返回的数据中包含所有这个路由，然而并不需要

解决办法：在格式化路由的时候将这个所有数据隔离掉

// 格式化路由的函数
export const formatRoutes = (routes)=>{
  let fmtRoutes = [];
  routes.forEach(router=>{
    if(router.name != '所有'){
      ...
    }
  });
  return fmtRoutes;
}

8. 修改权限不成功

BUG信息：发送了接口请求，但是数据不更新

分析问题：url路径参数是否和后端相匹配？

解决办法：rid改为rId、mids改为menuIds

9. 无法导入数据

BUG信息：发送导入数据请求，但是响应不成功

分析问题：

解决办法：

9. 无法添加员工

BUG信息：发送添加员工请求，但返回服务端异常

分析问题：

解决办法：

avatar
文章
阅读
粉丝