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. Python自动化办公--Pandas玩转Excel数据分析【二】

    相关文章: Python自动化办公--Pandas玩转Excel[一] Python自动化办公--Pandas玩转Excel数据分析[三] python处理Excel实现自动化办公教学(含实战)[一] ...

  2. Linux基础命令 [补档-2023-06-28]

    Linux基础命令 1-1.命令的基本格式 ​ Linux系统命令的通用格式为: ​ command [-options] [parameter] ​ 其中 ​ -command 命令本身 ​ -op ...

  3. nginx适配thinkphp3.2.3

    环境 centos7.9 nginx1.23.2 thinkphp3.2.3 PHP7.4.30 配置 配置nginx 默认位置在/usr/local/nginx/conf/nginx.conf主要配 ...

  4. UIWindow的概念与使用

    UIWindow的作用 UIWindow是UIView的子类用于显示程序内容.每一个UIView想要将内容显示到屏幕上都需要依赖于一个UIWindow. iOS应用程序要想正常运行至少要有一个UIWi ...

  5. System V|共享内存基本通信框架搭建|【超详细的代码解释和注释】

    前言 那么这里博主先安利一下一些干货满满的专栏啦! 手撕数据结构https://blog.csdn.net/yu_cblog/category_11490888.html?spm=1001.2014. ...

  6. PHP中目录操作函数

      PHP中目录操作函数 1.是否是目录 is_dir 判断给定文件名是否是一个目录 $path = dirname(__FILE___); echo is_dir($path) ? '目录' : ' ...

  7. 麒麟V10虚拟机安装(详细)

    现在国企和央企单位都在做国产化适配工作,服务器采用:中科曙光(海光Hygon).中科德泰(龙芯Loongson).宝德(鲲鹏Kunpeng)等国产配备国产处理器的服务器:数据库采用:人大金仓(King ...

  8. Java并发编程-CompletableFuture(下)

    大家好,我是小高先生,书接上文,我们继续来学习CompletableFuture.上文我们讲了基础装Future是如何升级为神装CompletableFuture以及如何购买CompletableFu ...

  9. 【React】排查两小时,修改一个词,记一个因代码书写不规范导致的生命周期BUG

    壹 ❀ 引 因为现在工作主要以修bug为主,日常工作中总是会接触到千奇百怪的前端问题,它可能是代码缺陷导致的程序错误,也可能是方案不合理造成的性能问题,老实说修bug是一件很枯燥的事情,你需要阅读大量 ...

  10. JS leetcode 最长公共前缀 题解分析

    壹 ❀ 引 今天做的又是一道让我沮丧的题,思路有,但是代码逻辑最后还是没能正确理出来,题名为最长公共前缀,题目如下: 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 ...