解决由于swiper引入方式不兼容低版本的浏览器导致报错“Loading chunk {n} failed”问题

我们能够使用测试环境，但是不能使用正式环境。但是上线正式环境后就报错了Loading chunk {n} failed，但是测试环境无法复现

初次遇到这个问题，先去网上搜索查到这个帖子：

• Vue项目在ie11浏览器点击跳转时无法跳转，报Loading chunk {n} failed，其他浏览器都没任何错误，解决方法

按照帖子解决方法走，确实可以输出错误，但问题依然没有解决。 突然远程的测试人员说可能是谷歌浏览器版本太低问题，结果我们就换IE浏览器，果然复现了问题。通过报错定位到是跳转的页面中的引入swiper导致的问题。于是尝试初始掉引入swiper的相关代码发现能成功跳转页面。验证了我们的问题定位。通过上网搜索查到这个帖子：

• vue使用swiper打包后ie浏览器打开语法错误问题

根据帖子的解决方法有点不适用，稍微改造了就成功解决问题了

//在main.js
import '../node_modules/swiper/dist/css/swiper.min.css'

//在需要使用swiper的文件中引入
import Swiper from '../../../../node_modules/swiper/dist/js/swiper';

总结：

1. 当然这个确实和浏览器版本问题有关，当浏览器更新到高版本就不存在这个问题了。(但也要考虑兼容低版本的浏览器)
2. 其实一开始的帖子标题就已经提到了浏览器兼容问题，我们只急匆匆的看解决方法，而不去注意标题已经告诉我们可以通过换一个低版本的浏览器复现问题，这样就拖延了我们定位问题的时间