配置浏览器兼容性问题

在vite.config.ts文件中配置

要安装 @vitejs/plugin-legacy

 

legacy({
			targets: ['ie >= 11'],
			// generate legacy browser's chunks
			renderLegacyChunks: true,
			/**
			 * auto detect
			 */
			modernPolyfills: true,
		})

• targets: ['ie >= 11']：指定了目标浏览器的范围，即要兼容的浏览器。在此示例中，目标浏览器是 IE 11 及以上版本。

• renderLegacyChunks: true：开启此选项后，@vitejs/plugin-legacy 会为旧版本浏览器生成单独的 legacy chunk。这样，现代浏览器将加载包含现代 JavaScript 代码的 chunk，而旧版本浏览器将加载包含转换后的兼容代码的 legacy chunk。

• modernPolyfills: true：启用此选项后，@vitejs/plugin-legacy 将自动检测需要的 polyfills，并将其添加到转换后的代码中。这样，旧版本浏览器可以获得所需的兼容性支持。

 

	esbuild: {
	// configure this value when the browser version of the development environment is lower
	// minimum support es2015
	// https://esbuild.github.io/api/#target
		target: 'es2015',
		include: /\.(ts|jsx|tsx)$/,
	},
	// for production build environments only
	build: {
	// minimum support es2015
		target: 'es2015',
	},

在esbuild配置中：

• target: 'es2015'指定了目标浏览器环境为ES2015（ECMAScript 2015）标准。
• include: /\.(ts|jsx|tsx)$/指定了要包含的文件类型，这里包括.ts、.jsx和.tsx文件。

在build配置中：

• target: 'es2015'同样指定了目标浏览器环境为ES2015。