After reading this article, if you still can’t solve your VUE compatible IE problem, I will teach you hand in hand, I hope that in this article, you not only to solve the compatibility problem, but also learn a way to solve the problem.

Why compatibility with IE?

Possible compatibility with IE is a headache for every front-end developer, Google, Firefox he is not sweet? Sweet, but don’t let users use the product from a developer’s perspective, right? If party A’s dad wants to use IE, what can you do? Haha, without further ado, let’s get to the point. At the beginning, our project is vuecli2.0. When we built it, it was very easy to solve IE.

// the main.js import is just a direct Babel thing'babel-polyfill'

// webpack.config.js
module: {
rules: [
      { test: /\.js$/, use: 'babel-loader'}]} // We'll leave webPack optimization aside for nowCopy the code

This article focuses on vuecli3.0+, which is compatible with IE. When we upgraded our project to 3.0, the Error message of Internet Explorer was still different every time I opened it, which really made me laugh and cry. The most annoying thing was that sometimes it was just a blank screen without any error. Of course, I know the reason for this has to do with the buffering mechanism of Internet Explorer.

By default, IE caches the results of the request. For the same URL, only the first request is actually sent to the server before the cache expires. With other browsers, each request is redirected to the server.

How to do?

When we encounter technical problems, I think we first think of two channels, the official website and the Issue of Github. Next, I will reflect the efficiency of these two channels to solve problems with the actual situation.

Version of the problem of thinking

Symptom: Blank screen

If you go to a search engine and type in Vuecli3 IE compatibility, there is a very big possibility that it will mislead you, let me give you an example.

Let’s take a look at the explanation on the official website

The Babel configuration generated by vuecli3+ by default supports es. Promise and es5 transformations. If you think about Babel configuration, you will get the wrong idea.

My solution: upgrade Vuecli and re-create the project. After packaging, I found that the new project was normal in IE browser. I thought it must be related to the version, so I compared relevant versions in package.json and upgraded vue and related versions to the latest version. Sure enough, the white screen problem was solved, but it still could not be opened and viewed (it was the background color of my project, and there was no content).

2. Vuecli3 + dependency package handling (pit)

Symptom: Error positioning is reported after packaging, and the arrow function is not converted

When I searched for error information in node_modules, I found socket. IO dependency. When I configured transpileDependencies, it still did not take effect. Anyway, I searched a lot, and one of them was very close, but it still didn’t solve the problem

When I added the debug package to transpileDependencies, the magic arrow function disappeared.

3. An error message is displayed indicating that static files in the public folder are incorrect

Again, go to the official website to find the answer, as expected, there is still the answer, directly above

This problem. I went to Babel’s website to manually transfer.

I hope that through this step on the pit, can bring value in addition to solving the problem of compatibility with IE, but also can bring a way to solve the problem. If this article has not solved your problem, you can talk to me privately, we discuss together.