Citing swiper’s vue project to open a blank under the ie browser, and thinking about programming habits


When I was working on the company’s official website, I didn’t pay attention to checking the compatibility of the ie browser. It was only at the end of the project that I found that there was a blank under ie.

There are already a lot of things in the project, and I can’t define the specific reason for what went wrong, and I feel at a loss when I draw my sword and look around. I only thought of the solution of simply opening the blank in the Internet browser of the Baidu vue project. Everyone said that it was because IE did not support es6 well, so just quote Babel-fill. I did as I did and changed the configuration, but it didn’t work. There was even a saying that the version of “webpack-dev-server” was too high. I downgraded the version, but it didn’t work out.

The stalemate lasted for two full days, and the time was wasted in vain. I was very anxious and irritable.

At this time, a colleague with rich experience generously and selflessly helped me sort out the thinking of positioning errors. When debugging bugs, I should be calm when I have no ideas. I must have a modular thinking, like building blocks, and add them one by one. The problem is known when one piece collapses.

So I created a new empty vue project, which can be displayed under ie, and then added things up a little bit, and then found that swiper is not compatible, and ie will not display it once added. The result is a problem with the swiper version. The latest swiper4 will display problems in IE, and the version can be displayed after downgrading to 3.4.2. At the same time, note that the definition methods and some methods of swiper3 and 4 are somewhat different, and some changes need to be made.

Learn a lesson, don’t wait until the end of the project to discover compatibility problems, find and solve them early.