background

The H5 project of the company was to be upgraded from VUe2 to VUe3. After doing a lot of research in the early stage and weighing the advantages and disadvantages, it did not make a major change in the end, but just made a migration. The scaffolding was also upgraded according to the migration document of VUe2.

The phenomenon of

The screen goes blank. This happens on ios10, 11, and 12. There’s no such feedback on older versions of ios and Android

why

1. There is an attribute compatibility problem when vue2 is migrated to VUe3. The attribute props of VUe3 cannot operate it directly in a low ios system

2, ES6 syntax compatibility problem, using a third-party library package using… Extension operators, and since third-party packages are not processed by Babel by default, there is no support for… A blank screen appeared on iOS 10 or less

Solution process:

The first reported problem with the operating system was the operating system: ios11, ios12 some versions we opened the iPhone8 11.4 with the Xcode emulator, opened the local project, and sure enough, the screen went blank

The error message became more and more obvious. Finally, it was located at the gate for processing all the sending and receiving messages. After repeated tests, it was found that the props could not be operated directly and a deep copy was needed.

All of a sudden, the familiar white screen appeared again. This time, it appeared on iPhone X11.0.1, but the local screen could be opened on 11.0, but it could not be opened after the package was sent to the pre-delivery. It was confirmed that the problem was in the packaging process.

Error screenshot:

Upon investigation, it was found that the project used… ES6 extended operator, and ios11.0 does not support this operator; Then add it to babel.config.js

{... Plugins: ["@babel/plugin-proposal-object-rest-spread"]}Copy the code

Packaged on 11.0 11.2 after trying no problem, thought to be liberated, who knows… .

In the test, it was found that ios10.3 is still blank screen, there is no idea about this error, there is no information about this error online, then search “ios10 blank screen”, most of the search results are that ES6 syntax is not converted to ES5 after compilation, combined with the local normal, the phenomenon of error in the pre-release environment, Ios10 does not support ES6 syntax and does not change high syntax to low syntax in dependent packages.

Ios10 white screen error:

The ultimate goal is to convert all ES6 syntax in current code and external dependency packages to low syntax

Configure Babel as follows:

New plug-ins:

And that’s it!

Reference Documents:

Segmentfault.com/a/119000002…

Kmanong. Top/KMN/QXW/for…

Blog.csdn.net/weixin_4494…