项目中遇到的问题及解决方式

​

启动报错

1.No matching version found for @babel/types@^7.10.1报错

解决：cnpm install

2.Module build faild(from ./mode_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function

解决：sass-loader版本太高，卸载后下载低版本

3.sock.js

/node_modules/sockjs-client/dist/sockjs.js
解决：注释掉：self.xhr.send(payload);

const utf8Encoder = new TextEncoder(); ^ReferenceError: TextEncoder is not defined

引入mangoose报错
解决：node版本太低，切换高版本的node

其他问题

1.跳转外部链接后返回页面不刷新

解决：浏览器问题（谷歌不刷新且没有缓存，手机浏览器部分会刷新，部分会直接展示缓存，与手机的版本以及浏览器的设置有关），改变思路，换了个方案：打开新的窗口（window.open）

2.vant 加入新的组件表示es package里没有

解决：卸载重新安装

3.git clone项目报错：OpenSSL SSL_read: Connection was reset, errno 10054

解决：命令行输入 git config --global http.sslVerify "false"

4.el-upload上传文件时，如果上一个文件还在上传中，再次上传时会覆盖未上传的文件。

之前在调用success方法时，直接将返回结果res加入attachments里
解决：改为在success里遍历fileList,通过判断response的值将fileList遍历塞给attachments.

success(res, file, fileList) {
console.log(res, file, fileList);
if (res.code == SUBMIT_NO) {
this.$message.error(res.message);
return;
} else if (res.code == 401) {
//登录超时
}
this.attachments.splice(0, this.attachments.length);
// 附件中是否有上传中状态
const upLoading = fileList.findIndex(item => {
return item.status !== 'success';
});
fileList.forEach(item => {
if (item.response) {
this.attachments.push(item.response);
} else {
this.attachments.push(item);
}
});
}

5.Vue多选框表格 Cannot read property ‘_selectionChanged’ of undefined"

解决：表格添加属性：lazy: true

6.CORS跨域请求错误

解决：html里添加<meta http-equiv="Access-Control-Allow-Origin" content="*" />

7.el-dialog + messagebox叠加多个弹框 导致有多层遮罩层，关闭最外层弹框时，遮罩层显示在了最外层

解决：之前的dialog使用的是 :modal-append-to-body="false" 改为 append-to-body

8.el-form表单校验在进页面时就触发了

解决：1.将表单的触发方式由change改为blur，这种方式会导致选择器组件无法及时更新错误提示
2.在mounted里执行clearValitdate()，清除表单校验。
this.$nextTick(() => {
this.$refs['form'].clearValidate();
});

9. border-image和border-radius不兼容，border-radius失效

解决：将border-image替换为background-image，内部再套一个div，设置border-radius，内容放在这个div里面。

10. vue3中 el-form表单无法输入

解决：el-form中model与ref同名了，改掉即可

11. el-upload上传头像报错TypeError: xhr.upload.addEventListener is not a function

原因： mockjs拦截了XHR
解决：在node_modules中找到mockjs/dist/mockjs 8308行 mockjs/src/mock/xhr/xhr.js 216行 下添加这段代码 MockXMLHttpRequest.prototype.upload = xhr.upload;然后重启项目

11. toFixed四舍五入问题（IE下正常，Chrome浏览器下四舍六入五留双）

原因：不同浏览器的原生方法不一致
解决：引入mathjs包，使用mathjs.format(value, precision)

12. watch $route失效

原因：路由跳转是会销毁当前父组件的，对于新的组件来说，初始化的$route是不会判断其变化的
解决：加上immediate: true， 即立即执行

13. IOS时间转换失败：new Date(“2022-08-04 5:00:00”) 返回invalid Date

原因：IOS只能解析“/”分割的日期
解决：new Date("2022-08-04 5:00:00".replace(/-/g, '/'))

14. 金额计算精度丢失问题

解决：借助big.js/decimal.js解决

15. element-ui按需加载国际化

解决：
按需加载：babel.config.js中添加[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
创建element-ui.js手动导入所有需要用的组件
main.js中添加
import '@/plugins/element-ui';
//国际化
import eleLocale from 'element-ui/lib/locale';
eleLocale.i18n((key, value) => i18n.t(key, value));

最后

以上就是落寞外套为你收集整理的项目中遇到的问题及解决方式的全部内容，希望文章能够帮你解决项目中遇到的问题及解决方式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。