(vite/webpack common) vue white screen Uncaught Syntaxerror: Unexpected token '?'

If it can be achieved, remember to like and share, thank you~

1. Description of the problem

Suddenly received feedback from the business side: The browser went blank, and the console output: Uncaught Syntaxerror: Unexpected token? This is a syntax error.
Insert image description here

2. If you use vite to build:

If it is built with Vite, according to the official documentation of Vite, build.target supports Chrome >=87, Firefox >=78, Safari >=14, Edge >=88 by default, so we need to manually be compatible with lower versions.

The vite code version is higher, causing the lower version browser to be unable to run. The result is that the version of his browser is very low (Google 44).

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

2. Then configure vite.config.js, as shown in the figure

import legacyPlugin from '@vitejs/plugin-legacy';
export default defineConfig({
    
    
  plugins: [
    legacyPlugin({
    
    
       targets: ["chrome < 60", "edge < 15"], // 需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"], // 面向IE11时需要此插件
      renderLegacyChunks: true,
     })
   ]
})

3. When you build, an error may be reported:

Error: terser not found. Since Vite v3, terser has become an optional dependency. You need to install it.

Just install the dependencies:

npm install terser

Repackage and run it in the browser, and low-end browsers will no longer report errors.

3. If you use webpack to build:

Need to download dependencies first

npm i @babel/polyfill  @babel/plugin-transform-runtime  @babel/preset-env -D

1. You need to configure it in vue.config.js:

const {
    
     defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
    
  transpileDependencies: true,
  configureWebpack:config => {
    
    
    config.entry.app = ["@babel/polyfill","./src/main.ts"]              
  },
})

2. Then configure it in babel.config.ts:

module.exports = {
    
    
  presets:[
     ["@vue/app",{
    
    
        polyfills:[
           "es6.promise",
           "es6.symbol",
           "es6.array.iterator",
           "es6.object.assign"
        ],
        useBuiltIns:"entry"
     }]
  ]
}