Difficult journey
Remember to solve a bug. The project is not complicated. It is a PC-side project based on vue-cli3. Previously, the development was run on Google Chrome, but in the second half of the development, the manager said that the project needs to be compatible with 360 Displayed in the 360 compatibility mode, I found that the project displayed a blank page in the 360 compatibility mode without any errors. It was the first time I encountered this problem, so I searched online to find the answer.
try to solve
1. The answers found through online searches are almost all Promsie compatibility issues. The solution given is babel-polyfill. Installing babel-polyfill and es6-promise, including script tags and main.js, have no effect. (Because he himself didn’t report Promsie’s fault and it was effective.) Unfortunately, the first attempt to solve the problem ended in failure!
2. I associated the problem with iview, so I added transpileDependencies: ['iview'] to vue.config.js. This configuration of transpileDependencies can be found in the vue cli document. By default, babel-loader will ignore all node_modules. document. If you want to explicitly transpile a dependency via Babel, you can list it in this option. At this time, I found that the project was still blank in 360 compatibility mode. I pressed F12 to open the console and found that he reported an error, which was a syntax error.
It can be seen that the error is that the syntax is not recognized, which should be caused by babel skipping a certain package in node_modules and not compiling it, so I clicked in to see which package it was so that I could add it to the configuration of transpileDependencies.
After clicking it, I found something like this. Obviously, finding the corresponding package in such a pile of text is like looking for a needle in a haystack. Besides, I didn't see the package name, so I had no choice but to give up this method again! At this point, I have spent almost a day trying to solve this problem, and it still hasn’t been solved. It’s really a bit torturous! ! !
3. Finally, with the help of a senior Java programmer in the company, I found a solution. Found the official documentation of vue cli
It now provides a modern mode. Vue CLI will generate two versions of the application, a modern version package for modern browsers that support ES modules , such as modern browsers such as Google and Firefox, and another old version package. Compatibility mode for unsupported old browsers such as IE and 360.
The first step is to add modern mode to the package.json file
The second step is to upgrade vue cli to version 5 or above.
The third step is to add a version compatible with ie8 and below in the .browserslistic file.
The last step is to remove a meta from the header of the entry file index.html on the home page.
That's it, the project is perfectly displayed in 360 compatibility mode! ! ! It took almost two days, and finally the problem was solved, and I felt a sense of relief. Recording the problems encountered in this way is not only convenient for myself to review in the future, but also hopes to help friends who have encountered similar problems and help you solve them.
The inspiration is that you must read more official documents, become more familiar with them, and study more. If you encounter problems in the future, you will be able to solve them more calmly.