使用vite兼容低端浏览器配置

 更新时间:2024年05月23日 11:31:58   作者:arks_惊蛰  
这篇文章主要介绍了使用vite兼容低端浏览器配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vite兼容低端浏览器配置

@vitejs/plugin-legacy

官方提供的插件,兼容低端浏览器

npm i @vitejs/plugin-legacy

vite.config.js

	import legacy from "@vitejs/plugin-legacy";
	 plugins: [
	    legacy({
	      targets: ["Chrome 64"],
	      modernPolyfills: true,
	    }),
  	],

vite兼容老版本浏览器,解决浏览器无报错但打开空白

最近一个医院的项目,遇到有些电脑能访问web页面,有些电脑无法访问。

最后发现是浏览器版本不一样,老的浏览器版本不能正常访问,而新的浏览器可以访问。

因为医院是内网环境,电脑数量又比较多,所以没办法一一去升级浏览器版本。

找了一些资料后得知可以使用@vitejs/plugin-legacy来兼容老版本的浏览器。

该插件可以为你的Vite项目生成适用于老版本浏览器的传统的基于ES5的构建包。

在你的Vite项目中运行以下命令来安装@vitejs/plugin-legacy:

npm install --save-dev @vitejs/plugin-legacy

还需要安装一个依赖 npm iterser -D  ,如果不安装的话可能打包时会出错

在Vite的配置文件(vite.config.js)中引入并注册@vitejs/plugin-legacy插件:

export default defineConfig({
  // 其他配置项...
  
  plugins: [
    // 注册 legacy 插件
    legacy({
      targets: ['ie >= 11', 'chrome <= 60'], // 需要兼容的目标列表,可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      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'
      ]
    }),
  ]
});

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3 Table分页保留选中状态代码示例

    vue3 Table分页保留选中状态代码示例

    这篇文章主要给大家介绍了关于vue3 Table分页保留选中状态的相关资料,vue table组件是一个非常方便的表格组件,它可以帮助我们实现分页和选中功能,需要的朋友可以参考下
    2023-08-08
  • vue3学习笔记简单封装axios示例实现

    vue3学习笔记简单封装axios示例实现

    这篇文章主要为大家介绍了vue3学习笔记简单封装axios示例实现,
    2022-06-06
  • element ui From表单校验不生效问题解决

    element ui From表单校验不生效问题解决

    表单校验是注册环节中必不可少的操作,表单校验可以提醒用户填写数据规则以确保用户提交数据的有效性,本文主要介绍了element ui From表单校验不生效问题解决,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • vue-cli5搭建vue项目的实现步骤

    vue-cli5搭建vue项目的实现步骤

    本文主要介绍了vue-cli5搭建vue项目的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Vue如何实现文件预览和下载功能的前端上传组件

    Vue如何实现文件预览和下载功能的前端上传组件

    在Vue.js项目中,使用ElementUI的el-upload组件可以轻松实现文件上传功能,通过配置组件参数和实现相应的方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vue-cli随机生成port源码的方法

    vue-cli随机生成port源码的方法

    这篇文章主要介绍了vue-cli随机生成port源码的方法,文中给大家介绍了vue 随机色生成方法,需要的朋友可以参考下
    2019-09-09
  • vue+js实现微信上传图片选择功能

    vue+js实现微信上传图片选择功能

    这篇文章主要为大家详细介绍了vue+js实现微信上传图片选择功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Vue条件渲染之v-if、v-else-if、v-else的完整指南

    Vue条件渲染之v-if、v-else-if、v-else的完整指南

    v-if和v-else是Vue.js中的控制指令,用于条件性地渲染一块内容,这些内容只会在指令表达式返回真值时才会渲染,这篇文章主要介绍了Vue条件渲染之v-if、v-else-if、v-else的完整指南,需要的朋友可以参考下
    2026-03-03
  • Vue的Flux框架之Vuex状态管理器

    Vue的Flux框架之Vuex状态管理器

    本文内容主要参考官方教程,为了方便理解,用更加通俗的文字讲解Vuex,也原文内容做一些重点引用。希望会对你有所帮助。
    2017-07-07
  • vue之Vue.use的使用场景及说明

    vue之Vue.use的使用场景及说明

    这篇文章主要介绍了vue之Vue.use的使用场景,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12

最新评论