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. 深度学习应用篇-元学习[14]:基于优化的元学习-MAML模型、LEO模型、Reptile模型

    深度学习应用篇-元学习[14]:基于优化的元学习-MAML模型.LEO模型.Reptile模型 1.Model-Agnostic Meta-Learning Model-Agnostic Meta-L ...

  2. 辣鸡 mac 下 pycharm 中代码拖拽的问题

    Editor –> General Enable Drag'n'Drop functionality in Editor

  3. automapper 10 +autofac+asp.net web api

    automapper 不必多说 https://automapper.org autofac 这里也不多说 https://autofac.org 这里主要 说 automapper 10.0 版本+ ...

  4. [Ngbatis源码学习][SpringBoot] ApplicationContextInitializer接口类的使用和原理解读

    ApplicationContextInitializer接口类的使用和原理解读 在看Ngbatis源码的过程中,看到了自定义的ApplicationContextInitializer实现类,对Ap ...

  5. 二进制安装Kubernetes(k8s)v1.29.2

    二进制安装Kubernetes(k8s)v1.29.2 https://github.com/cby-chen/Kubernetes 开源不易,帮忙点个star,谢谢了 介绍 kubernetes(k ...

  6. NC13950 Alliances

    题目链接 题目 题目描述 树国是一个有n个城市的国家,城市编号为1∼n.连接这些城市的道路网络形如一棵树, 即任意两个城市之间有恰好一条路径.城市中有k个帮派,编号为1∼k.每个帮派会占据一些城市,以 ...

  7. python 中记录dmesg信息并进行分析的方法(@)

    在Python中记录系统的dmesg 信息,并进行分析的方法简述: 基本命令: dmesg -C 清除之前的dmesg  信息: dmesg -T > testExample.msg      ...

  8. 【OpenGL ES】绘制彩色三角形

    1 前言 ​ [OpenGL ES]绘制三角形 中介绍了绘制普通三角形的方法,本文将介绍绘制彩色三角形的方法. ​ 本文完整代码资源见→[OpenGL ES]绘制彩色三角形 ​ 项目目录如下: 2 案 ...

  9. pta-神坛

    [神坛]pta *相邻两条边围成的三角形面积会是最小的 极角排序+叉积计算三角形面积 #include<bits/stdc++.h> #define int long long using ...

  10. C++ 多线程的错误和如何避免(14)

    在 C++11 中,不要将 volatile 用于线程,仅限于 MMIO(内存映射) 简单的回答, 在声明变量类型之前添加 "volatile" 关键字不会使对该变量有任何方式的原 ...