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. 超轻量级MP4封装方法介绍

    liwen01 2023.12.17 前言 MP4是目前非常常用的一种视频封装格式,关于MP4的介绍资料也非常多.我们常用的封装库或工具有:ffmpeg,libmp4v2,GPAC,MP4.js,它们 ...

  2. 从零玩转第三方登录之WeChat公众号扫码关注登陆 -wechatgzh

    title: 从零玩转第三方登录之WeChat公众号扫码关注登陆 date: 2022-09-27 22:46:53.362 updated: 2023-03-30 13:28:41.359 url: ...

  3. 【云原生 | Kubernetes 系列】—K8S部署RocketMQ集群（双主双从+同步模式）

    [云原生 | Kubernetes 系列]-K8S部署RocketMQ集群(双主双从+同步模式) 版权 本文为云录原创文章,转载无需和我联系,但请注明来自云录 https://www.yunzhuan ...

  4. EvilBox : ONE - WriteUp

    EvilBox : ONE 信息收集 扫描网段内存活主机,得到目标 nmap 进一步收集有效信息,只开放了22和80 访问80的页面没有什么有效信息 接着扫一下目录, 没有敏感的文件 在robots中 ...

  5. bash命令的使用

    bash的工作特性之命令执行状态返回值和命令展开所涉及的内容及其示例演出 !脚本执行与调试 1.绝对路径执行,要求文件有执行权限 2.以sh命令执行,不要求文件有执行权限 3..加空格或source命 ...

  6. PC端和移动端应用的开发差异

    PC端和移动端应用的开发差异主要体现在用户界面(UI)和用户体验(UX)设计.交互设计.性能优化.适配策略等方面.  

  7. 数仓安全测试之SSRF漏洞

    摘要:SSRF (Server-Side Request Forgery,服务器端请求伪造)是指由攻击者构造请求,然后利用服务器的漏洞以服务端的身份向内网发送请求对内网发起攻击. 本文分享自华为云社区 ...

  8. 如何给MindSpore添加一个新的硬件后端？快速构建测试环境！

    摘要:介绍如何给MindSpore添加一个新的硬件后端. 本文分享自华为云社区<如何给MindSpore添加一个新的硬件后端?快速构建测试环境!>,原文作者:HWCloudAI. Mind ...

  9. 华为云MVP程云：知识化转型，最终要赋能一线

    摘要:如今的智能语音助手,可以帮助我们完成日常生活中的一些常规动作.同样,在企业中,智能问答机器人也在扮演着同样的角色. 本文分享自华为云社区<[亿码当先,云聚金陵]华为云MVP程云:知识化转型 ...

  10. 华为云媒体査勇：华为云在视频AI转码领域的技术实践

    摘要:为大家介绍华为云媒体处理服务在视频AI转码领域的一些技术实践. 随着5G的落地和消费终端的不断升级,消费环节对视频画质的要求也越来越高,为了给消费者带来更清晰.更逼真和更具沉浸感的观感体验,对云 ...