vite + vue3 打包后 本地直接运行 type="module" crossorigin 替换为defer

需求: 想打包后,双击运行,不启动服务

  1. 修改 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base: './', // <-- 增加相对路径
})
  1. 打包后的 index.html 里面有 script
<script type="module" crossorigin src="./assets/index.3914429b.js"></script>

替换为

<script defer src="./assets/index.3914429b.js"></script>

这里我从webpack打包的代码抄过来的。简单说就是vite基于服务,所以都是用模块的形式搞的。

vite + vue3 打包后 本地直接运行 type="module" crossorigin 替换为defer - 多个vue文件就不好使了的更多相关文章

  1. npm run build 打包后,如何运行在本地查看效果(Nginx服务)

    这段时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆 ...

  2. 解决vite+elementplus 打包后出现的下拉列表多出空元素的bug

    打包后下拉列表出现的空元素bug 之前的项目element-plus版本是 "^1.0.2-beta.70"  把他升级一下就好了 npm i element-plus@1.0.2 ...

  3. Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

  4. moviepy应用pyinstaller打包后执行报错AttributeError: module audio/video.fx.all has no attribute fadein、crop

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 在开发moviepy的Python程序使用pyinstaller打包后 ...

  5. npm run build 打包后,如何运行在本地查看效果(Apache服务)

    目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...

  6. npm run build 打包后,如何运行在本地查看效果

    目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...

  7. maven无法加载本地jar包以及maven项目打包后本地jar包没有打进项目的问题解决办法

    1.首先设置依赖项,这样maven就会把该路径下的jar包导入项目引用 <dependency> <groupId>DPSDK-Manager</groupId> ...

  8. vue 打包后本地先自己启动服务 anywhere 非常好用

    :)nodejs服务器Anywhere Anywhere是一个随启随用的静态服务器,它可以随时随地将你的当前目录变成一个静态文件服务器的根目录. 一,安装node 在nodejs官网下载,安装后打开c ...

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

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

  10. vue打包后接口报错

    最近自己和朋友做了一个小的项目,用的是vue3.x版本,本地dev运行的时候接口什么的都是正常的,但是build打包后本地使用anywhere启动一个本地服务的时候发现接口报错405状态,发布到线上接 ...

随机推荐

  1. 4.6 Windows驱动开发:内核遍历进程VAD结构体

    在上一篇文章<内核中实现Dump进程转储>中我们实现了ARK工具的转存功能,本篇文章继续以内存为出发点介绍VAD结构,该结构的全程是Virtual Address Descriptor即虚 ...

  2. 2.8 PE结构:资源表详细解析

    在Windows PE中,资源是指可执行文件中存放的一些固定不变的数据集合,例如图标.对话框.字符串.位图.版本信息等.PE文件中每个资源都会被分配对应的唯一资源ID,以便在运行时能够方便地查找和调用 ...

  3. Git企业开发控制理论和实操-从入门到深入(五)|标签管理

    前言 那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量博客汇总 然后就是博主最近最花时间的一 ...

  4. Markdown Rules 详解

    使用VSCode编写Markdown文件时,建议安装插件markdownlint,它可以帮助自己更加规范的写文章. 下面是所有的markdown语法错误信息以便纠错. Rules文档 Markdown ...

  5. 使用Dapr和.NET 6.0进行微服务实战系列

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 本文是<使用Dapr和.NET 6.0进行微服务实战>的第1篇引言部分 ...

  6. 18. 默认堆/创建堆--《Windows核心编程》

    Windows 提供了以下三种机制来对内存进行操控虚拟内存:最适合用来管理大量对象数组或者大型数据结构内存映射文件:最适合用来管理大型数据流(通常是文件),以及在同一机器上运行的多个进程之间的共享数据 ...

  7. offline 2 online | Cal-QL:校准保守 offline 训出的 Q value,让它与真实 reward 尺度相当

    论文标题:Cal-QL: Calibrated Offline RL Pre-Training for Efficient Online Fine-Tuning. NeurIPS 2023,5 5 6 ...

  8. NC20684 wpy的请求

    题目链接 题目 题目描述 "题目名称只是吸引你来做题的啦,其实和题目没什么卵关系:o(* ̄▽ ̄*)o" -- 历史--殿堂 wpy移情别恋啦,他不喜欢spfa了,现在他喜欢使用di ...

  9. 蔚来杯2022牛客暑期多校训练营2 GJK

    比赛链接 G 题解 知识点:思维. \(lds(p)\) 表示最小上升子序列分划数 (Dilworth 定理) \(lis(p)\cdot lds(p) \geq n \Rightarrow max ...

  10. 探索AI视频生成新纪元:文生视频Sora VS RunwayML、Pika及StableVideo——谁将引领未来

    探索AI视频生成新纪元:文生视频Sora VS RunwayML.Pika及StableVideo--谁将引领未来 由于在AI生成视频的时长上成功突破到一分钟,再加上演示视频的高度逼真和高质量,Sor ...