解决IE报错[vue router]Failed to resolve async component default:strict 模式下不允许分配到只读属性

2023-07-29,,

  之前遇到过一个奇怪的问题,在其他浏览器下一切正常,但在万恶的IE下,却一直不行。

  具体问题场景就是:比如orderDetail页面出现问题,那么只要是路由跳转的,点第1次无法跳转,必须得点第2次才可以跳转,但是跳转过去之后,页面也是一片空白,不加载路由页面。然后控制台报错:strict 模式下不允许分配到只读属性

  所以我往这方面搜索,在网上看到一些相关信息

  IE中JavaScript异常提示:strict 模式下不允许分配到只读属性。报异常的代码如下:

document.getElementById("mapLayer").style = "width: 98%;height:98%;";

  解决方法如下: 将css属性拆分开依次设置属性值即可。

document.getElementById("mapLayer").style.width = "98%";
document.getElementById("mapLayer").style.height = "98%";

  注:在这严格模式下xxx.style会被认定为只读属性,所以在IE中报错。

  但是,我在我的代码里找了几圈都没有找到类似的只读属性。

  没办法,只能使用傻办法一层一层排查。最后发现把orderDetail页面里的内容全部换成其他页面,发现是可以正常的,由此可以确定,问题就出在该orderDetail页面里,然后再到orderDetail页面里一层一层排查。发现问题出在这里

import QRCode from 'qrcode'

// 动态生成二维码
useqrcode () {
  let canvas = document.getElementById('canvas')
  let _this = this
QRCode.toCanvas(canvas, this.qrcode, function (error) {
if (error) {
_this.$message({
message: '二维码生成失败,请重新支付',
type: 'error'
})
}
})
},

  关键是不知道为什么引入QRCode,然后画图会导致IE报这种错,对IE实在是蛋疼,没办法只能修改这地方

  解决方案:换 qriously 生成二维码

<qriously class="qrcode" :value="qrcode" :size=""/>

  修改之后一切正常了。

解决IE报错[vue router]Failed to resolve async component default:strict 模式下不允许分配到只读属性的相关教程结束。

《解决IE报错[vue router]Failed to resolve async component default:strict 模式下不允许分配到只读属性.doc》

下载本文的Word格式文档,以方便收藏与打印。