前端项目踩坑日志

jason_yang
1,098 阅读17分钟

1.nuxt项目

首次访问总是有缓存

访问首次页面访问总是读取缓存，需要切换路由后才能正常触发asyncData()服务端方法 调用接口

  • 原因
    • 在api\axios.js配置里面 配置错误，使用注释了baseURL导致服务端首次使用了相对地址访问
const service = axios.create({
    //baseURL:'http://yzscloud.cn', // api的base_url
    timeout: 5000 // request timeout
  })
  • 方案
    • 把baseURL打开
const service = axios.create({
    baseURL:'http://yzscloud.cn', // api的base_url
    timeout: 5000 // request timeout
  })

访问某些模块，第一次加载不出数据，需要刷新才可以


const service = axios.create({
    baseURL:'http://yzscloud.cn', 
    timeout: 5000 // request timeout
  })

第一次能加载是因为 使用的服务端渲染

  • 方案
    • 把baseURL 加上 wwww
const service = axios.create({
    baseURL:'http://www.yzscloud.cn', 
    timeout: 5000 // request timeout
  })

访问某些模块，第一次加载不出数据，需要刷新才可以

  • 原因
    • docker-compose build的时候 没有把新内容打包进去
  • 方案
    • docker-compose build的时候 需要加上 --no-cahe

前端nuxt项目修改配置无效

前端nuxt项目，明明config.prod.js已经设置的 9001端口，但是启动后还是用的是测试环境里的7001

  config.cluster = {
    listen: {
      port: 9001,
      hostname: "0.0.0.0",   
    },
  };
  • 原因
    • processes.json配置里面配置的是
{
  "apps": [
    {
      "name": "versionServer",
      "cwd": "./",
      "script": "./server.js",
      "env": {
        "isProduction": 0,
        "EGG_SERVER_ENV": "production",
        "NODE_ENV": "production"
      }
    }
  ]
}

但是实际的环境使用的是config\config.prod.js , 中的EGG_SERVER_ENV变量production没有对应上prod，所以没有加载配置里的9001，使用的默认的7001

  • 方案
    • 调整processes.json内容
{
  "apps": [
    {
      "name": "versionServer",
      "cwd": "./",
      "script": "./server.js",
      "env": {
        "isProduction": 0,
        "EGG_SERVER_ENV": "prod",
        "NODE_ENV": "production"
      }
    }
  ]
}

2.php项目

php网站提示 Cannot send sesion cache limiter

后台管理系统 登录时提示登录异常，刷新页面后访问 admin/index又可以正常访问后台的内容。但是所有保存的接口都会提示 xxxxxxx=Warning: session start0): Cannot send sesion cache limiter - headers already sent(output started at php://input:1) in /var/www/ifashion gz prod/public/index.phpon line 2

  • 原因
    • 可能是php.ini 中 session 没开，或者过期
  • 方案
    • 直接整个docker-compose down + up 重启即可

laradock部署php项目容器内容资源死活下载不了，总是提示失败

  • 原因
    • 可能是本地的网络缓存除了问题
  • 方案
    • 直接重启服务器

php官网后台输入正确账号后，登录无效，被重定向到首页

  • 原因
    • cookies已经保存之前部署的信息
  • 方案
    • 清空浏览器cookies即可

php项目无法访问

无法访问，提示nginx 返回502，但是单独配置二级节点页面又可以访问

  • 原因
    • 服务器中毒，cpu拉满100% ，导致php服务无法响应
  • 方案
    • 使用定时任务清除病毒，docker-compose down 一下，再重新启动docker-compose up， 注意排查问题时，建议先用ip+端口确认本地php服务是否正常。

3.移动端

苹果手机web项目

苹果手机日期内容显示 NNNN/NN/NN nn:nn:nn

  • 原因
    • 部分老版本苹果系统提供的内核无法识别 如：2020/06/19
    • 这种 / 为间隔的时间格式，导致最终解析的时候被N代替了,
  • 方案
    • 传入 new Date() 之前就把字符串进行转化所有的 / 变为 - 即可解决问题

转化结果时间差了8小时

  • 原因
    • 前端能识别的JSON 时间格式为 2021-12-06T09:25:32.245Z
    • 年-月-日T时:分:秒.毫秒 时区
    • 内部实现为实现提取时间以0时区为标准进行转化此时得到的时间非北京时间,
    • 读取时区进行偏移获取到北京时间，后端现有 dto 传输不存在时区这就导致了转化之后差 了8小时
  • 方案
    • 后端给前端直接使用字符串传递，前端不做任何加工

联想平板白屏 jenkis打包问题不兼容

  • 原因
    • jenkis服务器的缓存node_modle 是老的包
  • 方案
    1. 手动打包上传
    2. jenkins 删除node_modules文件夹重新install

红米手机 el-table滚动到底部时，无法触发加载更多

  • 原因
    • 正常情况下，滚动到底部时，内容高度 - 表格高度 - 滚动条相对于其顶部的偏移 = 0 但在红米手机下，滚动到底部时，0< (内容高度 - 表格高度 - 滚动条相对于其顶部的偏移) < 1
  • 方案
    • 判断条件改为 (内容高度 - 表格高度 - 滚动条相对于其顶部的偏移) < 1

脚手架版本扫码登录一直报

  • 原因
    • “Whitelabel Error Page” 路由使用hash模式，loginScan接口会把#后的字符截掉
  • 方案
    • 改用history模式

部分手机白屏

  • 原因
    • try{} catch{} 未写参数
  • 方案
    • try{} catch(e){} 写完整参数

偶尔蓝牙打印机打印不出纸

  • 原因
    • 未知
  • 方案
    1. 第一次出现，更换打印模板名字后解决
    2. 第二次出现多次重启打印机与PDA后解决

部分手机从图库选择图片，多选时会闪退

  • 原因
    • 多选时H5组件传值是【multiple】，原生收到的参数是【MODE_OPEN_MULTIPLE】，判断该值即可确认为多选，多选从系统取照片路径是从
  • 方案
    • 【Intent.getClipData()】方法取值，但是部分手机可能是系统做了定制，取值是从【intent.getData()】取，导致Intent.getClipData()为空而闪退 先判断Intent.getClipData()是否有值，有值则使用，为空则从intent.getData()继续取值

ios项目打包失败

使用fastlane打包的时候如果手工在xcode上修改版本号，会导致fastlane自动打包软件无法正常打包

  • 原因
    • 在xcode修改，版本号实际保存不是字符串数字，而是变量{CFBundleVersion}，导致fastlane无法读取
  • 方案
    • 建议使用xcode打开BloomBeauty_prod.plist直接修改CFBundleVersion标签下的内容

4.微信/小程序

前端调用微信获取jsApiTicket接口失败

  • 原因
    • 跨域，无法从前端获取
  • 方案
    • 后端获取并传给前端

微信公众号无法打印调试

  • 原因
    • 当打开了 wx.config 打开了 debug模式后，原有的alert(‘xx’)无法正常输出
  • 方案
    • wx.config({ debug: false,}）把debug属性设置为false即可

公众号调用微信扫描第一次可以，第二次无法触发

  • 原因
    • 只有才返回 因为扫描逻辑流程写在了组件mounted事件里，当
  • 方案
    • wx.config({ debug: false,}）把debug属性设置为false即可

公众号线上无法调试定位具体的代码错误

  • 原因
      1. 手机无法打开控制台打印
  1. vite打包的上传的代码被混淆
  • 方案
      1. 使用本地dev:host 启动项目，自带网络ip
  1. 在微信开发者工具里面 访问启动的服务
  2. 通过vite.config.ts 配置 server的proxy ，做代理解决跨域问题
  3. 本地启动的ip地址 可能需要在公众号配置白名单

微信开发者工具 点击微信扫描，直接报错

  • 原因
    • 真机返回的参数是包含，逗号分隔，代码使用res.resultStr.split(',')[1] 做切割。 微信开发者工具则返回 {"scan_code": {"scan_result":"scan resultStr is here"}} ，切割后 会返回undefined 导致报错
  • 方案
      1. 不建议用微信开发者工具调试扫描，推荐真机
  1. res.resultStr.split(',')需要判断是否为空

5.样式/事件

sass运行项目报错

  • 原因
    • 新的sass除了calc() 不允许'/'
  • 方案
    • 全局安装 sass-migrator node_modules执行sass-migrator division **/*.scss

pc长按弹出气泡框，点击其他地方气泡框不消失

  • 原因
    • PC是点击事件，点击其他地方弹框vant是touch事件
  • 方案
    • 下载 @vant/touch-emulato 插件，main.js引入即可

新环境 重新拉分支打包失败，提示缺少python xxx

  • 原因
    • 因为引用了 node-sass
  • 方案
    • 删除node-sass

el-table表头不能选中复制

  • 原因
    • el-table表头不能选中复制
  • 方案
    • 设置css
 .el-table th > .cell {
  white-space: normal;
  user-select: text;
}

移动端项目 使用vant 居中弹框 部分机型页面模糊失真

  • 原因
    • 使用了transformX，元素宽度为奇数时会出现
  • 方案
    • 1.自定义dialog居中样式，覆盖van-dialog本身的css样式的transformX 2.css方法

列表页面推荐款过多会撑开页面

  • 原因
    • 过多的推荐款的元素产生了过多的padding和margin 导致table元素自动撑开内容进行适应
  • 方案
    • 限制展示前几个

使用css user-select: none; 无效

长按收藏菜单会出现系统菜单，使用css user-select: none; 无效

  • 原因
    • 图片的鼠标事件触发
  • 方案
    • 给图片元素加上css pointer-events: none;

设置固定列，固定列下方的横向滚动条拉不动

得拉不是固定列下方的滚动条才行

  • 原因
    • 固定列将这一部分的滚动条遮住了
  • 方案
//给固定列设置下边距
::v-deep .el-table__fixed {
 height: auto !important;
 bottom: 17px !important; //具体值是多少根据你横向滚动条的高度进行设置
}
//去掉固定列下方的横线
::v-deep .el-table__fixed::before,
.el-table__fixed-right::before {
 display: none;
}

全局样式 .scss后缀文件， main.ts引入，修改样式不会热重载

  • 原因
    • 未在vite.config.ts中配置 CSS 预处理器
  • 方案
    • vite.config.ts中配置css预处理器，不要在main.ts中引入，在app.vue的style中引入使用，注意 style得加上 lang='scss'

el-table控制台报 ResizeObserver loop limit exceeded

  • 原因
    • el-table下的各列设置了min-width属性，在宽度不够时，element会根据min-width按比例计算宽度，capp中有监听resize事件改变el-table高度的代码，el-table的min-width属性和此代码同时作用于table组件造成冲突，dom元素不断重绘
  • 方案
    • 全局添加代码 // 解决 ElTable 自动宽度高度导致的「ResizeObserver loop limit exceeded」问题
const fixElTableErr = table => {
    const oldResizeListener = table.methods.resizeListener
    table.methods.resizeListener = function(){
        window.requestAnimationFrame(oldResizeListener.bind(this))
    }
}
fixElTableErr(ELEMENT.Table)

有拖拽列排序的el-table

有拖拽列排序的el-table，在调整列宽后导致页面上的文字无法选中复制

  • 原因
    • el-table调整列宽时，会触发sortable的onstart事件，但是没有触发onend事件，导致默认事件被阻止了
  • 方案
    • 设置sortable的handle属性，将操作dom设置为.cell，避免操作同一个dom

element-plus组件中有些描述是英文

如表格无数据时 显示 not data

  • 原因
    • element-plus默认使用英文
  • 方案
    • main.ts中配置国际化
import zhCn from 'element-plus/es/locale/lang/zh-cn'app.use(ElementPlus, {
  locale: zhCn,
})

cdn资源elementUI 字体跨域

  • 原因
    • nginx配置错误
  • 方案
    • 改为返回对应的允许地址多个地址，使用逗号隔开是错误的

使用:deep()修改el-table样式失效

  • 原因

  • 方案
    • 需将el-table包一层根标签

el-table 开启sortable排序功能，排序后取数据不对

  • 原因
    • el-table排序只会排界面，数据没有排
  • 方案
    • el-table监听sort-change，手动根据排序类型修改数据的排序

element-ui加载字体库【woff】导致的跨域问题

  • 原因
    • script标签默认不会跨域，但是字体库的加载是css里面请求的，会出现跨域问题
  • 方案
    • 字体库请求头会携带origin，在Nginx上取origin的值配置到Access-Control-Allow-Origin即可

6.vue项目

引入vue-calendar-component,报Clock未定义

  • 原因

  • 方案
    • 将插件核心代码拷贝进项目组件中

子组件触发emit事件时，报警告 

提示  Component emitted event "xxx" but it is neither declared in the emits option nor as an "onxxx" prop.

  • 原因
    • vue3写法，触发emit事件时，未在emit中声明
  • 方案
    • 声明 const emit = defineEmits(['back'])

vue3 自定义v-model 线上会提示没定义，多个属性场景

  • 原因
    • 使用setup 标签打包和开发运行结果不同
  • 方案
    • 改用计算属性处理

使用vue2.7版本 vue3写法不能使用 router、route

  • 原因
    • vue3使用vue-router4
  • 方案
import {getCurrentInstance}  from 'vue';
// 访问vuex
export const usestore = () => {
  const vm = getCurrentInstance();
  if (!vm) throw new Error( 'must be called in setup');
  return vm.proxy.$store;
}
// 访问router
export const useRouter = () => {
  const vm = getCurrentInstance();
  if (!vm) throw new Error( 'must be called in setup');
  return vm.proxy.$router;
}
// 访问route
export const useRoute = () => {
  const vm = getCurrentInstance();
  if (!vm) throw new Error( 'must be called in setup');return vm.proxy.$route;
}

vue2.7使用 mixin和setup时，setup不生效

vue2.7中使用setup，mixin和setup同时定义同名变量，setup中的变量不生效

  • 原因
    • 未知，估计优先取mixin中的变量
  • 方案
    • vue3的写法中不推荐mixin

给对象新增属性时，不具备响应式

  • 原因
    • vue2.7 响应式原理还是用vue2的defineProperty实现 import {set} from vue
  • 方案
    • 用set方法添加

VUE路由跳转出现错误

VUE路由跳转出现Redirected when going from “/x” to “/y” via a navigation guard.报错

  • 原因
    • 1、vue-router版本太高问题 2、全局路由拦截问题
  • 方案
    • 1、降低vue-router版本至3.0.7 2、在路由配置文件内加入代码： const originalPush = Router.prototype.push; Router.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject); return originalPush.call(this, location).catch(err => err); }; 3、直接在router.push('xxx')时加上异常捕获.catch(err => {})

vue导入xlsx-style组件报错

Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx

  • 原因
    • cptable模块无法解析
  • 方案
    • 在vue.config.js添加代码
configureWebpack: {
    externals: {
      './cptable': 'var cptable'
    }
  }

Vue.directive("v-btn-perm", {})自定义指令v-btn-perm无效

  • 原因
    • 自定义指令名字里面不需要v-，使用的时候前面加上就可以
  • 方案
    • 正确写法：Vue.directive("btn-perm", {}) 使用：

切换vue-cli项目，控制台报错

attrsisreadonlyattrs is readonly listeners is readonly

  • 原因
    • 重复的Vue实例，可能是因为一些Vue插件导入Vue实例的方式与我在项目中的方式不同造成的
  • 方案
	//vue config.js里面配置 
  configureWebpack: {
    externals: {
      vue: 'Vue'
    }
  },

升级vue-cli跑测试环境，NODE_ENV=test时 语法不兼容

  • 原因
    • 在测试环境中有些插件可能会被禁用或调整，有些代码可能会使用不同的配置进行编译或打包。 将测试环境的NODE_ENV
  • 方案
    • 改成与生产一致

vue3中 v-model进行父子组件通信失效

  • 原因
    • vue3v-model在props使用modelValue接收
  • 方案
    • 子组件改父组件的值 引入defineEmits，
const emit = defineEmits(["update:modelValue"]);
emit ("update:modelValue",'需要改变的值')

基于vite的开发环境.vue文件无法写jsx

  • 原因
    • @vitejs/plugin-vue-jsx默认支持后缀jsx/tsx文件
  • 方案
    • 改用jsx后缀开发

使用自定义组件库ims-moblie-component是?.报错

  • 原因
    • 猜测装扮灵VUE版本过低
  • 方案
    • 参考ims-moblie-component 去掉?. 装扮灵重写一个组件

vue升级2.7

  • 原因
    • vue-loader需要升级15.10.0，运行报错
  • 方案
    • vue-loader需要升级15.10.0，需要配置VueLoaderPlugin插件

修改代码后热更新触发代码页面上代码未更新

  • 原因
    • 估计是vite热更新是对比打包结果少量字段改动可能会被忽略直接通过对比跳过页面上的代码更新
  • 方案
    • 1、重启开发服务器重新打包解决 2、大面积添加或删除空白内容强制增加对比差异

在父组件想通过$refs.访问子组件的方法时

在父组件想通过refs.访问子组件的方法时，提示方法无效constproxy=getCurrentInstance();proxy.refs.访问子组件的方法时，提示方法无效 const { proxy } = getCurrentInstance(); proxy.refs.form.validate() //提示找不到validate方法

  • 原因
    • <script setup > 定义的组件，默认是不对外暴露方法
  • 方案
    • 在对应组件 加入对外暴露的方法
<script setup> 
defineExpose({
  validate, 
})
</ script>

7.性能/内存问题

内存溢出

  • 原因
    • 关闭的页面相关内存没有回收。
  • 方案
    • 主动处理堆数据之间的引用

测试demo 创建一个 一千万长度的数据并且填充内容1,再删除 数组数据之后浏览器需要等待一定时间或者用户空闲时间才会进行内存回收

  • 原因
    • 浏览器内存回收机制无法通过代码直接控制
  • 方案
    • 配置谷歌浏览器启动参数，gc（）方法释放

大量数据导致内存暴增

  • 原因
    • 创建响应式需要提供set和get方法，每一个方法都会占用内存空间
  • 方案
    • 不需要响应式的数据不用通过data方法return回去就不会触发响应式设置了

系统偶尔崩溃

  • 原因
    • 使用elementUI的el-select遍历绑定的value为NaN
  • 方案
    • 避免数据值为NaN

页面 容易出现奔溃的情况

  • 原因
    • 关闭页签时没有将keep-alive里的缓存清除
  • 方案
    • 1.动态配置keep-alive的include属性 2.在关闭页签时，主动清除keep-alive缓存

8.其他

转发外网接口无效

转发外网转发www.test.com:7788/bindUser 接口无效

#  看板系统 后台测试
upstream api_dev {
    server 10.7.121.155:7788; # 内部测试服务器
} 
#  看板 测试接口转发
server {
    listen 49081;
    server_name localhost;  

    add_header Cache-Control no-cache; # 设置协商缓存 
    # access_log /var/log/nginx/upstream_access.log varups; # 指定日志
 
    # 后台接口转发
    location /eeka-logsystem/ {
        include common/proxy;
        include common/proxy.wss;
        proxy_pass http://api_dev;
    }
}

前面项目升级https后，访问http的图片会不显示

  • 原因
    • 自动把http转成https，然后图片又没有支持https访问
  • 方案
    1. 后台图片支持https
    2. 前端把图片资源转发到自己的https域名下

jest单元测试

jest单元测试，使用expect(wrapper.find('.el-notification').element.style.bottom).toBe('0px') 中 style无法识别。 提示： Property 'style' does not exist on type 'VueNode'.

  • 原因
    • 在ts项目里面 无法识别 element 为 'VueNode'对象，需要声明转化
  • 方案
    • 先把对象转化为 类型
const el = <HTMLElement>wrapper.find('.el-notification').element
    expect(el.style.bottom).toBe('0px')

偶现点击业务按钮后白屏

  • 原因
    • B用户先登录， A 用户登录后 ，挤出B用户。 B用户跳转login.html访问不到 因为hd项目的代码是用vue工程化， index-hd 和 mes-hd 用的都是路由。没有都页面login.html的物理文件存在
  • 方案
    • 把 location.href = /login.html 改成 /login

无法上传文件，或执行node代码

Error: EPERM: operation not permitted, lstat 'D:\yzs_project\myproject\dist\cdn'

  • 原因
    • 打开了ftp工具在dist文件夹下，导致文件夹不能删除
  • 方案
    • 关闭ftp文件夹

全新拉取的项目无法安装运行

  • 原因
    • package.json中删除了所有做了cdn的包
  • 方案
    • 恢复 pageckage包

新环境重新拉分支打包失败

提示

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'D:\\trunk\node_modules\@babel\compat-data\data\corejs3-shipped-proposals'
  • 原因
    • 未知
  • 方案
    • 不使用npm， 改用 pnpm打包

部署sentry项目失败

使用git + docker部署 ，执行bash install.sh时，总是提示Error in install/bootstrap-snuba.sh:3

  • 原因
    • 可能是最新代码对centOS兼容不好
  • 方案

前端请求接口总是提示 403 caught (in promise) Invalid CORS request

测试环境调用后端 提示 403 caught (in promise) Invalid CORS request ，各自跨域已经打开

  • 原因
    • 后端在拦截的时候做了白名单处理。必须是指定的ip才能解决
  • 方案
    • 后端配置好前端调试启动时的 域名+默认的 localhost:8080 前端也只能使用这个调试。正式也是一样

转发二级节点内网接口 提示400 Bad Request

转发二级节点内网接口 提示400 Bad Request The plain HTTP request was sent to HTTPS port

  • 原因
    • 转发的时候，转发的服务器需要用https，但是配置写了http
   location /second/mark {
      ...
        proxy_pass http://second_api;
    }
  • 方案
    • 把http改成https
   location /second/mark {
      ...
        proxy_pass https://second_api;
    }

eslint 错误

Do not access Object.prototype method 'hasOwnProperty' from target object

  • 原因
    • 直接使用xxx.hasOwnProperty(key) 判断对象是否包含该值，会报eslint错误
  • 方案
    • Object.prototype.hasOwnProperty.calll(xxx, key)

正式环境配置一个新的端口部署环境，部署完成后，无法访问

  • 原因
    • 防火墙设置了限制端口
  • 方案
    • linux命令：（新增端口）
firewall-cmd --zone=public --add-port=443/tcp --permanent   # 443是新增端口
firewall-cmd --reload

Cannot read properties of undefined (reading 'key') 错误

报 Cannot read properties of undefined (reading 'key') 错误，导致系统卡死无法操作

  • 原因
    • v-for里绑定的key值重复
  • 方案
    • 保持key唯一性，若数据没法保证唯一性，可用index代替

keep-alive exclude失效

  • 原因
    • 使用setup语法糖，不能定义name属性
  • 方案
    • 使用unplugin-vue-define-options插件，vite.config文件配置plugins,在tsconfig.json配置"types": ["unplugin-vue-define-options"]

tdesign 部分组件无法使用

  • 原因
    • tdesign还在版本迭代中，使用部分功能可能是新的版本才存在的
  • 方案
    • 升级tdesign

sortable.js更新问题

使用sortable.js插件做表格拖动排序，界面排序后数据未更新，手动更新数据后界面不对

  • 原因
    • 界面未刷新
  • 方案
    • 需要把表格data重置，即：data=[]，然后再把data赋值为更新后的数据，使界面重绘

图片加缩略图后缀，影响大图展示原图

  • 原因
    • 七牛配置问题
  • 方案
    • 关闭七牛缓存URL参数设置

使用自定义表头 slot='header' 时 数据变化页面不会渲染

  • 原因
    • slot='header' 不会渲染页面
  • 方案
    • 使用#header

保存数据出现重复问题

  • 原因
    • 数据刷新采用异步更新逻辑导致异步更新的同时触发二次保存产生重复数据
  • 方案
    1. 控制请求顺序使用Promise产生队列控制先后顺序
    2. 将数据异步更新逻辑中异步部分尽量减少 以上方法适用于所有存在保存后需要更新数据的场景

培训环境websocket连接失败

  • 原因
    • 使用https协议，所以对应的websocket也要支持 https的接口访问才ok。 后端默认6180 ws接口是http，27282 是前端转发 是  wss 协议
  • 方案
    • 6180-->27282

新增的记住列功能项目加载初期就会执行

  • 原因
    • 打包的所有代码没在方法或者函数内部会立即执行
  • 方案
    • 改为方法包裹

el-table 固定列无法触摸上下滑动

element-ui组件【el-table】在移动端上使用固定列后，固定列无法触摸上下滑动

  • 原因

  • 方案
    • 目前让用户触摸未固定的列来进行上下滑动

img标签动态绑定src，在ipad存在无法根据变量动态响应的情况

  • 原因
    • 动态添加src被当做静态资源处理了
  • 方案
    • 1.加上require 2.通过绑定class动态切换背景图

执行npm run 任何指令都报错

Error: ENOENT: no such file or directory, uv_cwd

  • 原因
    • Jenkins在发布文件时，堡垒机停留在当前在发布的文件夹内
  • 方案
    • 退出当前文件夹，重新进入即可执行命令

tdesign使用slot之后部分内容不可见

  • 原因
    • 需要使用对应的affix固钉功能
  • 方案
    • affix添加固定容器

裁剪EPSmobile使用安卓原生方法报错

  • 原因
    • 公用ims-mobile-components的webViews公用类与本地公用类冲突
  • 方案
    • 优先挂载ims-mobile-components，在挂载本地的到全局

查看高清图片放大图会被3D图遮住

  • 原因
    • preview组件放大demo z-index 低
  • 方案
    • 增加perview放大图层的z-index

$slots获取不到具名插槽的名字

作用域插槽和具名插槽使用的时候,$slots获取不到具名插槽的名字

  • 原因
    • $slots只能获取到不带作用域（具名或默认）的插槽内容
  • 方案
    • 使用$scopedSlots

t-select组件远程搜索展现数据不全

  • 原因
    • tdesign中的t-select组件开启远程搜索之后依旧会走内置的filter逻辑对返回值进行文本匹配导致数据展示不全
  • 方案
    • 开启远程搜索的同时补充属性 filter={() => true}

< script setup>定义的组件无法设置name属性

  • 原因

  • 方案
    • 另外定义一个< script >标签，在里面设置name属性：
 
<script>
export default {
    name: 'xxx'
};
</ script>

刷新页面时需要提醒用户保存数据但是有时候会失效

  • 原因
    • 网页地址切换之后会导致事件失效，需要重新绑定
  • 方案
    • 在路由守卫afterEach中重新绑定事件才有效

input框focus blur事件为触发

  • 原因
    • 使用了fastclick库，input加了readonly，需要双击才能触发
  • 方案
    • 不使用fastclick

树形表格第一行的数据无法进行展开与收起

  • 原因
    • 第一行row-key为0，树形表格row-key可以支持string，正负数，为row-key = 0时会出现效果异常
  • 方案
    • 将0转成字符串'0'

组装的两层结构的数组合并指向同一引用

组装的两层结构的数组，遍历给里面的数据加唯一值，用外层的index和里层的拼起来，但是里面拿到外层的index是最后一条数据的index

  • 原因
    • 猜测组装结构时引用地址重复
  • 方案
    • 将组好的数据深克隆一份，在进行遍历

业务功能只触发方法1 不触发方法2

修改整款全局数值时，立即点保存，存在只计算时间单价，不触发保存事件问题

  • 原因
    • 鼠标按下时，输入框失去焦点触发计算，弹出遮罩层，挡住按钮，鼠标放开时，事件触发不在按钮上，因为click是需要mousedown和mouseup在同一个目标上触发才能完成，所以鼠标click事件无法响应
  • 方案
    • 两个解决方案：
      1. 使用mousedown事件，但mousedown事件会优先执行，所以需要在mousedown事件中使用setTimeout异步执行
      2. 将计算的遮罩层缩小，不遮挡按钮

集成sentry后，报错信息无法定位到源码行

  • 原因
    • vue.config.js devtool 配置错误
  • 方案
    • devtool: 'hidden-source-map'

导出功能无法使用

  • 原因
    • 正式环境使用https协议，导出的链接是http协议，基于浏览器安全策略下无法下载
  • 方案
    • 导出链接使用nginx转发的https链接

首次进入用户页面使用回车查询触发浏览器刷新页面

  • 原因
    • 页面中有文本框或按钮等输入控件，同样会触发回车键的默认提交行为。此时浏览器会尝试根据当前页面的 URL 发送一次 GET 请求，如果 URL 中不包含任何参数，浏览器就会进行页面的刷新操作。
  • 方案
    • 使用@keydown.enter.prevent阻止默认行为
avatar
文章
阅读
粉丝