最近闹了个误解,vite插件@vitejs/plugin-legacy的作用是为打包后的文件提供传统浏览器兼容性支持

所以自然而然的以为能使vue3能支持ie11,但使用后vue3项目仍然在IE11报错,”strict 模式下不允许访问函数或参数对象的“caller”属性“

但实际上vue3不支持ie11,但vite并不是只为vue服务,它是一个独立的开发服务器和打包工具,也可以为react等其他框架服务,所以这是一个思维误区,别的框架是有可能通过@vitejs/plugin-legacy支持ie11的,只是vue3的proxy不能支持

@viyejs/plugin-legacy官方文档说明在这里插入图片描述

相同误解的小伙伴以及官方的回答

在这里插入图片描述
在这里插入图片描述

vue团队明确表示vue3放弃支持ie11的计划,支持ie11只能使用vue2

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md

使用vue2+vite脚手架

npm init vue@2即可创建vue2+vite项目,打开脚手架的vite.config.js,可以看到默认已经加入了@vitejs/plugin-legacy,支持ie11
开发时打开ie发现是看不到页面的,打包后才能生效
原因在于,Vite作为一个基于浏览器原生ESM的构建,工具,它省略了开发环境的打包过程,利用浏览器去解析imports,在服务端按需编译返回,ie浏览器不支持原生ESM,所以看不到页面,只能打包后才能看见
脚手架的vite.config.js

import { fileURLToPath, URL } from "node:url"

import { defineConfig } from "vite"
import legacy from "@vitejs/plugin-legacy"
import vue2 from "@vitejs/plugin-vue2"
// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [
    vue2(),
    legacy({
      targets: ["ie >= 11"],
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
    })
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

个人搭的vue2+vite(兼容ie)的模板

https://github.com/zqy233/vite-vue2-ie-template

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐