项目中将vue的项目打包成非module的script

news/2024/10/17 15:44:42/

背景:由于宿主环境是比较低版本的火狐浏览器,需要兼容。。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"/><link rel="icon" type="image/svg+xml" href="/vite.svg"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="Cache-Control" content="no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"/><title>xxxxx管控系统</title>
</head>
<body style="margin: 0;padding: 0">
<div id="main" style="height: 100%; width: 100%;background: #040c20;"></div>
<script type="module" src="./main.ts"></script>
</body>
<script>(function (win) {// 获取页面所有的 <script > 标签对象let scripts = document.getElementsByTagName('script')// 遍历标签for(let i = 0; i < scripts.length; i++) {// 提取单个<script > 标签对象let script = scripts[i]// 获取标签中的 srclet url = script.getAttribute("src")// 获取标签中的 typelet type = script.getAttribute("type")//获取是否有crossorigin属性let isCross = script.hasAttribute('crossorigin')// 获取标签中的js代码let scriptText = script.innerHTML// 如果有引用地址或者 type 属性 为 "module" 则代表该标签需要更改if (url && (type === "module" || isCross)) {if(url==='./main.ts' || url === '/@vite/client') //如果是开发环境不处理return// 创建一个新的标签对象let tag=document.createElement('script');// 设置src的引入tag.setAttribute('src',url);// 设置js代码tag.innerHTML = scriptText// 删除原先的标签script.remove()// 将标签添加到代码中document.getElementsByTagName('head')[0].appendChild(tag)}}})(window)
</script>
</html>


http://www.ppmy.cn/news/1539738.html

相关文章

你存在,在我们的攻击画像里

从挨批到挨夸&#xff0c;我只用了一个动作 嗨&#xff0c;还是我&#xff0c;顺丰的安全研究员K&#xff0c;今天又在网络安全的海洋里“冲浪”&#xff0c;结果被三条告警的“浪”拍得晕头转向&#xff1a;这三条告警彼此简直毫不相干&#xff0c;可是看着间隔时间&#xff…

LabVIEW提高开发效率技巧----事件触发模式

事件触发模式在LabVIEW开发中是一种常见且有效的编程方法&#xff0c;适用于需要动态响应外部或内部信号的场景。通过事件结构&#xff08;Event Structure&#xff09;和用户自定义事件&#xff08;User Events&#xff09;&#xff0c;开发者可以设计出高效的事件驱动程序&am…

easyocr 本地部署模型 识别图像 ocr - python 实现

使用 easyocr 本地部署识别图像 ocr ,可以满足简单图像场景的ocr识别。 可以进行 中文、英文 ocr 识别。 安装 python 库 pip install easyocr 识别本地模型下载地址&#xff1a;easyocr本地部署模型识别图像ocr-python实现资源-CSDN文库 也可通过程序直接下载官方链接 识…

木舟0基础学习Java的第三十二天(Maven,SpringBoot)

Maven 1.什么是 Maven Maven 翻译为"专家"、"内行"&#xff0c;是 Apache 下的一个纯 Java 开发的开源项目。基于项目对象模型(缩写:POM)概念&#xff0c;Maven利用一个中央信息片断能管理一个项目的构建、报告和文档等步骤。 Maven 是一个项目管理工具…

Html 标题加图标

每个网页选项卡都有一个图标&#xff1a; <meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>主页</title><link rel"icon" href"images/记事本.png&…

深入解析Java 22:专栏介绍

深入解析Java 22&#xff1a;专栏介绍 Java&#xff0c;作为一种广泛使用的编程语言&#xff0c;一直以来都在不断地发展和改进。2024年3月19日&#xff0c;Java 22的GA版本正式发布&#xff0c;带来了众多令人瞩目的新特性和性能优化。本专栏将深入解析Java 22&#xff0c;带…

精益与数字化的融合:制造业的创新之路

回望过去&#xff0c;精益管理作为制造业的瑰宝&#xff0c;以其“消除浪费、持续改进、顾客至上”的核心理念&#xff0c;引领了无数企业走向成功。从丰田生产方式到全球范围内的广泛实践&#xff0c;精益管理不仅提升了生产效率&#xff0c;更重塑了企业的文化和价值观。它教…

shell错误修改

错误处理 检查ffmpeg和ffprobe命令是否已安装 if ! command -v ffmpeg &> /dev/null || ! command -v ffprobe &> /dev/null thenecho "ffmpeg或ffprobe未安装&#xff0c;请先安装它们。"exit ficommand -v xxxx command 是一个内置命令&#xff0c;…