npm i @vitejs/plugin-legacy --save

import legacy from '@vitejs/plugin-legacy';

export default defineConfig({

  base:"./",

  plugins:[

    vue(),

    legacy({

      targets:["defaults","not IE 11"],

    })

  ]

});

打包完成后，需要把 script 标签里面的 nomodule，crossorigin 属性删掉

删掉含有 type="module" 的标签

data-src 属性换成 src。

直接用此代码修改index.html

const fs = require("fs");

const {JSDOM} = require("jsdom");

const dom = new JSDOM(fs.readFileSync("./dist/index.html"));

//删除包含type="module"的标签

var tags = dom.window.document.querySelectorAll("*[type=\"module\"]");

for(var i = 0 ; i < tags.length; i++){

    var tag = tags[i];

    tag.parentElement.removeChild(tag);

}

//需要把 script 标签里面的 nomodule，crossorigin 属性删掉

tags = dom.window.document.querySelectorAll("SCRIPT[nomodule]");

for(var i = 0 ; i < tags.length; i++){

    var tag = tags[i];

    tag.removeAttribute("nomodule");

}

tags = dom.window.document.querySelectorAll("SCRIPT[crossorigin]");

for(var i = 0 ; i < tags.length; i++){

    var tag = tags[i];

    tag.removeAttribute("crossorigin");

}

//data-src换成src

tags = dom.window.document.querySelectorAll("SCRIPT[data-src]");

for(var i = 0 ; i < tags.length; i++){

    var tag = tags[i];

    var src = tag.getAttribute("data-src");

    tag.removeAttribute("data-src");

    tag.setAttribute("src", src);

}

var html = "<!DOCTYPE html>\r\n" + dom.window.document.documentElement.outerHTML;

fs.writeFileSync("./dist/index.html", html);

console.log("成功修改dist/index.html");

VIte+Vue3 打包在本地 双击 index.html 打开项目的更多相关文章

  1. 手把手带你实现基于 Vite+Vue3 的在线Excel表格系统

    今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 2020年09月18日Vue.js 3.0发布, ...

  2. 如何开发一款基于 Vite+Vue3 的在线表格系统（上）

    今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 Vue是什么?大多前端开发者对这个词已毫不陌生了 ...

  3. 如何开发一款基于 vite+vue3 的在线表格系统（下）

    在上篇内容中我们为大家分享了详细介绍Vue3和Vite的相关内容.在本篇中我们将从项目实战出发带大家了解Vite+Vue3 的在线表格系统的构建. 使用Vite初始化Vue3项目 在这里需要注意:根据 ...

  4. 基于 vite 创建 vue3 全家桶项目（vite + vue3 + tsx + pinia）

    vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...

  5. vite vue3 规范化与Git Hooks

    在 <JS 模块化>系列开篇中,曾提到前端技术的发展不断融入很多后端思想,形成前端的"四个现代化":工程化.模块化.规范化.流程化.在该系列文章中已详细介绍了模块化的发 ...

  6. 使用vite + vue3 + ant-design-vue + vue-router + vuex 创建一个管理应用

    使用vite + vue3 + ant-design-vue + vue-router + vuex 创建一个管理应用的记录 使用vite 创建项目 我创建的node 版本是 v16.17.1 使用N ...

  7. 使用vite + vue3 + ant-design-vue + vue-router + vuex 创建一个后台管理应用

    使用vite + vue3 + ant-design-vue + vue-router + vuex 创建一个管理应用的记录 使用vite 创建项目 我创建的node 版本是 v16.17.1 使用N ...

  8. vite+vue3批量导入静态资源图片；动态绑定大量图片

    vite版本:vite3:vue版本:vue3 打包上线后发现,动态绑定的图片皆失效. 单图可用 import 导入解决,但是若有大量图片,一一导入则耗时耗力. vue2+webpack 可用 req ...

  9. 打包ideaUI本地项目，以供本地使用

    #首先我们要在本机进行一些配置 在本机配置环境变量(控制面板->高级系统设置->环境变量->) #用cmd检测是否配置成功 如果你在ideaUI里,配置好了之后.我们现在来打架包 # ...

  10. 将本地jar包打包到本地仓库和上传到私服

    1.本地jar打包到本地仓库 mvn install:install-file -Dfile=jar包完整地址或相对地址 -DgroupId=自定义的groupID -DartifactId=自定义的 ...

随机推荐

  1. C#开源的一款友好的.NET SDK管理器

    前言 今天推荐一款由C#开源的.友好的.NET SDK管理器:Dots. 工具介绍 Dots 是一款 .NET SDK 管理器,可让您轻松安装.卸载和切换 .NET SDK.它是一款跨平台工具,可在 ...

  2. Java 中时间对象的序列化

    在 Java 应用程序中,时间对象是使用地比较频繁的对象,比如,记录某一条数据的修改时间,用户的登录时间等应用场景.在传统的 Java 编程中,大部分的程序员都会选择使用 java.uti.Date ...

  3. react 事件函数中 this 绑定问题

    在使用类方式创建组件时,类中定义一个函数,并且绑定到元素的点击事件上,此时这个函数中this指向并不是当前这个组件. 组件代码如下: class App extends React.Component ...

  4. 为什么匿名内部类可以实例化并实现抽象方法？lambda表达式是简化了匿名内部类的实现过程吗？

    为什么匿名内部类可以实例化并实现抽象方法? 在Java中,接口是一种特殊的抽象类型,它只定义了一个或多个抽象方法.接口不能被实例化,但是我们可以使用匿名内部类来实现接口并创建一个具体的对象. 匿名内部 ...

  5. Text Intelligence - TextIn.com AI时代下的智能文档识别、处理、转换

    一.智能文档处理介绍 在AI时代,智能文档处理技术正变得越来越重要.它包括了智能文字识别(OCR).智能文档信息抽取.文档图像处理以及文档转换等多个方面.这些技术共同构成了现代信息处理的核心,广泛应用 ...

  6. Caffeine Cache缓存

    SpringBoot 集成 Caffeine Caffeine 和 Spring Cache 依赖,使用注解方法实现缓存 依赖 <!--提供 Spring Boot 中的缓存支持--> & ...

  7. C#/VB.NET 添加、删除PPT幻灯片中的数字签名

    本文介绍如何通过C#及VB.NET代码来添加数字签名到PPT幻灯片文档,以及如何将文档中的数字签名删除. 辅助工具: Spire.Presentation.dll (dll版本为5.11.2) 注意: ...

  8. 华为云Classroom聚焦人才数字化转型，引领智慧教育改革新模式

    随着教育行业数字化转型进程加快,利用现代化云端技术手段,线上线下相结合方式建立的全新OMO产教融合一体化已成为行业趋势.华为云Classroom平台沉淀了华为多年研发实践经验和多种前沿技术,以赋能伙伴 ...

  9. 探究Python源码，终于弄懂了字符串驻留技术

    摘要:在本文中,我们将深入研究 Python 的内部实现,并了解 Python 如何使用一种名为字符串驻留(String Interning)的技术,实现解释器的高性能. 每种编程语言为了表现出色,并 ...

  10. openGemini内核源码正式对外开源

    摘要:openGemini是一个开源的分布式时序数据库系统,可广泛应用于物联网.车联网.运维监控.工业互联网等业务场景,具备卓越的读写性能和高效的数据分析能力. 本文分享自华为云社区<华为云面向 ...