首页 > 其他分享 >vue3+ts+vite适配低版本浏览器白屏

vue3+ts+vite适配低版本浏览器白屏

时间:2025-01-23 09:43:46浏览次数:1  
标签:适配 ts legacy vue3 import runtime vite

前言

  vite需要引入多个包来适配低版本浏览器,如果只是用网上常规的@vitejs/plugin-legacy来配置还是会出现部分android 9的出现白屏问题

 

第一步

package.json 引入 

"core-js": "^3.39.0",
"regenerator-runtime": "^0.14.1",

"@vitejs/plugin-legacy": "^5.4.2",

 

第二步

main.ts(注意放在最顶部)

import 'core-js/stable';
import 'regenerator-runtime/runtime';

 

第三步

vite.config.ts

import { defineConfig, loadEnv } from 'vite';
import legacy from '@vitejs/plugin-legacy';

export default ({ mode }: { mode: string }) => {
  const env = loadEnv(mode, process.cwd());

  return defineConfig({
    plugins: [
      legacy({
        targets: ['defaults', 'not IE 11', 'Chrome >= 53', 'Android >= 6'],
        additionalLegacyPolyfills: ['core-js/stable', 'regenerator-runtime/runtime'],
      }),
    ],
  });
};

 

标签:适配,ts,legacy,vue3,import,runtime,vite
From: https://www.cnblogs.com/zxd66666/p/18687124

相关文章

  • 前端ECharts加标记点及标记线和提示框
    ECharts是一个开源的JavaScript可视化库,广泛应用于数据可视化领域。它提供了丰富的图表类型和强大的配置项,能够满足各种复杂的数据展示需求。本文将详细介绍如何在ECharts图表中添加标记点、标记线和提示框,以增强数据的可读性和用户体验。一、ECharts的基本使用在深入讲解标记点......
  • Vue3 —— 安装及配置环境
    Vue官网:https://vuejs.org/配置环境终端:Linux和Mac上可以用自带的终端。Windows上推荐用powershell或者cmd。GitBash有些指令不兼容。安装Node.js:安装地址:https://nodejs.org/en/安装@vue/cli:执行:npmi-g@vue/cli如果执行后面的操作有bug,可能是......
  • vue3 + leaflet@1.94---海量点位加载
    import{CanvasMarkerLayer}from'@panzhiyue/leaflet-canvasmarker'importimgfrom'@/assets/image/logo.png'onMounted(()=>{window.customMap=mapInit.initMap({target:'map-container',coordinate:[36.09,1......
  • vue3 + leaflet@1.94---带箭头的轨迹线
    import'leaflet-polylinedecorator'//箭头线(引入第三方插件)onMounted(()=>{window.customMap=mapInit.initMap({target:'map-container',coordinate:[36.09,120.35]})constdrawnItems=newL.FeatureGroup()window.custom......
  • 深化Edge AI 应用:德承工控机GM-1100安装Ubuntu 24.04.1 LTS系统操作指南
    EdgeAI:边缘运算(EdgeComputing)结合人工智能(AI),将AI模型和算法安排在负责处理边缘运算的工控机上,除了能够就近撷取设备端的数据外,还能够进行资料处理与机器学习的任务,透过EdgeAI,不再需要将大量数据传到云端服务器,有效缩短处理时间、提高反应速度,还能够降低对于网络带宽的需求......
  • 洛谷题单指南-线段树的进阶用法-P4602 [CTSC2018] 混合果汁
    原题链接:https://www.luogu.com.cn/problem/P4602题意解读:在一堆果汁中选出若干果汁,使得最小的美味度最大,且总体价格小于等于g,总体体积大于L,求这个最大的美味度。解题思路:显然,应该对答案进行二分,二分到一个美味度x,那么接下来check()函数要做的事,就是在所有美味度>=x的果汁中,查......
  • 深化Edge AI 应用:德承工控机GM-1100安装Ubuntu 24.04.1 LTS系统操作指南
    EdgeAI:边缘运算(EdgeComputing)结合人工智能(AI),将AI模型和算法安排在负责处理边缘运算的工控机上,除了能够就近撷取设备端的数据外,还能够进行资料处理与机器学习的任务,透过EdgeAI,不再需要将大量数据传到云端服务器,有效缩短处理时间、提高反应速度,还能够降低对于网络带宽的需求也更......
  • 【YashanDB知识库】Mybatis-Plus适配崖山配置
    本文内容来自YashanDB官网,原文内容请见https://www.yashandb.com/newsinfo/7281300.html?templateId=1718516问题:较早版本mybatis-plus识别数据库类型是通过jdbcurl识别的,访问崖山数据库就会出现报数据库类型不支持的错误:java.lang.IllegalStateException:dbTypenotsupport......
  • 【vue3组件】【大文件上传】【断点续传】支持文件分块上传,能够在上传过程中暂停、继续
    一、概述本示例实现了一个基于Vue3和TypeScript的断点上传功能。该功能支持文件分块上传,能够在上传过程中暂停、继续上传,并且支持检测已经上传的分块,避免重复上传,提升上传效率。以下是关键的技术点与实现流程:文件分块:将大文件分成多个小块,每块的大小是固定的(例如5MB)......
  • 数据迁移丨借助 pg2mysql 从 PostgreSQL 到 GreatSQL
    数据迁移丨借助pg2mysql从PostgreSQL到GreatSQL上篇《数据迁移丨借助AI从PostgreSQL到GreatSQL》介绍了如何使用AI+pg_dump/COPY的方式将PostgreSQL迁移到GreatSQL中,各位同学看过之后,会发现两款数据库还是有一些差异,例如对象层次结构、数据类型等方面,如果采用......