问题分析记录

页面在一台电脑的浏览器正常，在另一台电脑浏览器上不正常

1）可能是浏览器缓存原因 localStorage cookie，一台电脑的浏览器上有，另一台没有
2）电脑日期时间设置不一样
3）浏览器版本不一样
4）浏览器设置不一样（阻止弹窗、安全设置）
5）一个浏览器输入地址是http://xx，一个是https://xx
6）是否有使用本地电脑host文件代理，导致请求的数据来源不一样

偶现问题

1）操作顺序不同
a. 先操作A，再操作B，后操作C
b. 先操作B，再操作A，后操作C

2）存在异步操作
a. 异步请求，相应时间，是不一定的。两个异步请求，哪个返回快，就不一定了

代码报错

1）根据代码报错的 提示信息、错误位置，一步步往上排查
2）根据操作按钮位置（触发的事件），一步步往上排查

页面中有两个按钮，分别绑定了事件

1、点击这个按钮，触发那个按钮事件：vue加上ref；可能两个按钮的DOM元素id相同。

vue-cli

一、.js文件中jsx语法无法正常解析，但是.vue中jsx语法可以解析
解决方案：检查webpack.base.conf.js中module - rules - js - include,中是否包含需要解析的文件

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('enterPages'), resolve('vuetify'), resolve('node_modules/webpack-dev-server/client')]
},

二、less sass scss解析错误
1、检查node_modules是否有对应的less sass scss。
如果没有，手动安装（没有会报路径错误，明明路径写对了，还是找不到../xxx/xx.less）

npm i less sass scss -D

2、检查有没有对应的加载器 less-loader node-sass sass-loader
如果没有手动安装

npm i less-loader -D

3、不要在webpack.base.conf.js配置

image.png

4、默认配置在这个文件下

image.png

canvas图片跨域

1、图片跨域问题

当我们使用 canvas 导出图片的时候，如果图片对象没有设置可以跨域，那么就会报错

图片

如果在新建 Image 对象的时候，如果加上 跨域属性

image.crossOrigin = "anonymous";

有时候设置了属性还是一样会报错，可能是命中了缓存，所以我们最好还要在 图片访问路径加一个时间戳

img.src = `xxxx?time=${Date.now()}`;

设置scrollTop无效

1、vue中，改变了数据，页面重排导致，解决方案，加this.$nextTick

this.$nextTick(() => {
    this.$el.querySelector('.el-dialog__body').scrollTop = Infinity;
});