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. PersistenceException 持久性异常

    首先查看他提供的错误信息 检查pom.xml文件,查看是否有: 确保文件夹是这种xml格式的 操作maven  >>>>clean 和compile       进行清理和重新 ...

  2. iMessage群发,iMessage群发基础知识,iMessage群发源代码分享

    在当今的数字化时代,即时通讯已经成为我们日常生活和工作中不可或缺的一部分,其中,苹果的iMessage服务因其出色的用户体验和无缝的设备间同步而备受用户喜爱. 然而,你是否想过如何利用iMessage ...

  3. CodeForces 1030E Vasya and Good Sequences 位运算 思维

    原题链接 题意 目前我们有一个长为n的序列,我们可以对其中的每一个数进行任意的二进制重排(改变其二进制表示结果的排列),问我们进行若干次操作后得到的序列,最多能有多少对 \(l, r\) 使得 \([ ...

  4. Swagger系列：Spring Boot 2.x集成Spring Doc（Swagger 3.0）

    目录 一.简介 1.SpringFox工具(不推荐) 2.SpringDoc工具(推荐) 二.集成 1.环境 1. 引入Maven依赖 2.配置SpringDocConfig(配置类方式) 3.配置S ...

  5. GDAL使用PROJ坐标转换相关问题的总结

    目录 1. 概述 2. 详论 2.1. 数据 2.2. PROJ库 2.3. 参考 1. 概述 GDAL是使用PROJ进行坐标转换的,但是很容易出现转换不了的问题,这里总结一二,以供参考. 2. 详论 ...

  6. 华为云MVP朱有鹏：做IoT开发乐趣无穷，年轻开发者更要厚积薄发

    [摘要] 可以预见的是,AIoT会是未来一段时间主流的技术趋势方向,当前也有不少科技巨头涌入其中,蓄势待发,而5G的到来加速了AIoT产业的扩张速度,所以如华为云MVP朱有鹏所说,年轻的开发者应该要拥 ...

  7. Python图像处理丨图像的灰度线性变换

    摘要:本文主要讲解灰度线性变换. 本文分享自华为云社区<[Python图像处理] 十五.图像的灰度线性变换>,作者:eastmount. 一.图像灰度线性变换原理 图像的灰度线性变换是通过 ...

  8. JVM内存模型，你看这一篇就够了

    摘要:JVM是一种用于计算设备的规范,是一个虚构出来的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的. 本文分享自华为云社区<[云驻共创]JVM内存模型的探知之旅>,作者:多米 ...

  9. 数据智能——DTCC2022！中国数据库技术大会即将开幕

    ​ 关注DTCC有几年了,还是在当中学到了很多的干货.今年我的大部分时间也都是投入在了数据治理的学习和数据治理工具的调研中.也非常渴望有这种机会去了解一下国内顶尖公司这方面的前沿技术与应用. DTCC ...

  10. 火山引擎 DataTester：一个 A/B 测试，将一款游戏的核心收益提升了 8%

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 随着社会节奏及生活方式的改变,休闲游戏在移动游戏市场的占比逐渐升高,据伽马数据发布的<2022 年休闲游戏发 ...