Solve the problem of the vite project Uncaught Syntaxerror: Unexpected token> vue project launching a white screen

Problem background

There has always been no problem in the development environment, but when it comes to the production environment, the display of a white screen is launched.

I checked the corresponding relationship between nginx configuration and web storage location, and the output was not problematic. When I opened the console, I opened the output: Uncaught Syntaxerror: Unexpected token? This is obviously a syntax error.

However, it can be used in the production environment, so I quickly asked my colleague to check the browser version, and the result was that the browser version of his side was very low (Google 76).

Cause of the problem

The vite code version is high, causing the lower version of the browser to fail to run

vite project browser compatibility

After vue3 is packaged, the white screen appears in the lower version of browsers or webview. The reason is that it is syntax compatibility issues.

According to the official documentation of vite:

Default supportChrome >=87、Firefox >=78、Safari >=14、Edge >=88Transfer, so we need to manually compatible with lower versions.

Solution

1. First install the plugin: npm i @vitejs/plugin-legacy -D

2. Then configure

import legacyPlugin from '@vitejs/plugin-legacy';
export default defineConfig({
  plugins: [
    legacyPlugin({
      targets: ['chrome 52'], // Requires a compatible target list, multiple targets can be set      additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // This plugin is required when targeting IE11    }),
]
})

Repackage and run to the browser, and the lower browser will not report an error.

Uncaught Syntaxerror: Unexpected token >

In fact, many of this problem are caused by the higher version of our code. This solution is used because it is a vite project.

If your vue2 project or react project is on your side, you can use babel-polyfill.

You can search for the specific steps, it’s almost the same!

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.