Vite2 is compatible with lower versions of chrome (such as Sogou 80). Some grammars requiring higher versions are processed through polyfills

Preliminary treatment

• Introduce plug-ins to handle compatibility issues

npm install @vitejs/plugin-legacy -D

• To configure vite.config.js
• targets: The default is package.json Medium browserslist Suggested value
• additionalLegacyPolyfills
• polyfills
• modernPolyfills: Enabling this option will generate a separate for the new build polyfills block , The official does not recommend the use of , Because of its automatic detection , After the configuration , Instant browser support , Still use nomodule Loading polyfills Script for （ I am here replaceAll() Configure in polyfills, Don't take effect , Estimate the cutting-edge function of calculation , So either change the wording , Or it has to be here ）

import legacy from '@vitejs/plugin-legacy'
plugins: [
			vue(),
			vueSetupExtend(),
			AutoImport({
    
				imports: ['vue', 'vue-router', 'vuex'],
			}),
			legacy({
    
			//  Try to be compatible with older browsers （ barring ie11）
				targets: ['chrome 80'],
				additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // Configured pair ie11 It's no use 
			})
		]

After the configuration , Different scripts will be loaded dynamically according to the browser support ,<script nomodule> This machine is not supported ESM Load conditionally in the browser of polyfills And old bundles .

Problem location （ Grammar problem ）

vite After packing, it's still es6 grammar , Some grammars require a higher version , Need to pass through polyfills（polyfills By simulating equivalent code in a lower version of the browser , To implement the behavior of high version syntax ） To deal with

• replaceAll () Supported at least chrome85

TypeError: wye(...).replaceAll is not a function

Compatible Syntax

• polyfill Cannot be used directly , Need to be in plugin-legacy Use in ,

legacy({
    
				targets: ['chrome 80', 'ie >= 11'],
				additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // regenerator-runtime/runtime @dian/polyfill
				renderLegacyChunks: true,
				polyfills: [
					'es.symbol',
					'es.array.filter',
					'es.promise',
					'es.promise.finally',
					'es/map',
					'es/set',
					'es.array.for-each',
					'es.object.define-properties',
					'es.object.define-property',
					'es.object.get-own-property-descriptor',
					'es.object.get-own-property-descriptors',
					'es.object.keys',
					'es.object.to-string',
					'web.dom-collections.for-each',
					'esnext.global-this',
					'esnext.string.match-all',
					//  This cannot be handled 
					'es.string.replace-all'
				]
			})

• in modernPolyfills（ Handle... Successfully ）

legacy({
    
				targets: ['chrome 80', 'ie >= 11'],
				additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // regenerator-runtime/runtime @dian/polyfill
				renderLegacyChunks: true,
				polyfills: [
					'es.symbol',
					'es.array.filter',
					'es.promise',
					'es.promise.finally',
					'es/map',
					'es/set',
					'es.array.for-each',
					'es.object.define-properties',
					'es.object.define-property',
					'es.object.get-own-property-descriptor',
					'es.object.get-own-property-descriptors',
					'es.object.keys',
					'es.object.to-string',
					'web.dom-collections.for-each',
					'esnext.global-this',
					'esnext.string.match-all'
				],
				modernPolyfills: ['es.string.replace-all']
			})

modernPolyfills and polyfills The difference is not clear , Gradually improve ...

• Mainstream polyfills The library is core-js