Vite打包时使用plugin解决浏览器兼容问题

一、安装Vite插件

在终端输入如下命令:

npm add -D @vitejs/plugin-legacy

二、配置config文件

在项目目录下创建vite.config.js文件夹,配置如下代码:

import { defineConfig } from "vite";
import legacy from "@vitejs/plugin-legacy";
export default defineConfig({
    plugins: [legacy({
        targets:["ie 11"]
    })]
})

Vite打包时使用plugin解决浏览器兼容问题_第1张图片

三 、打包代码

Vite打包时使用plugin解决浏览器兼容问题_第2张图片

打包完成以后会有两个js代码,其中一个文件名中带有legacy,我们目标文件就是带有legacy的文件 

Vite打包时使用plugin解决浏览器兼容问题_第3张图片

这时候我们的箭头函数就转化为了兼容性更高的普通函数

Vite打包时使用plugin解决浏览器兼容问题_第4张图片

你可能感兴趣的:(Webpack,webpack,前端)