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. 1.7 完善自定位ShellCode

    在之前的文章中,我们实现了一个正向的匿名管道ShellCode后门,为了保证文章的简洁易懂并没有增加针对调用函数的动态定位功能,此类方法在更换系统后则由于地址变化导致我们的后门无法正常使用,接下来将实 ...

  2. Java多线程-JUC-1(八)

    前面把线程相关的生命周期.关键字.线程池(ThreadPool).ThreadLocal.CAS.锁和AQS都讲完了,现在就剩下怎么来用多线程了.而要想用好多线程,其实是可以取一些巧的,比如JUC(好 ...

  3. Spring一套全通2—工厂高级

    百知教育 - Spring系列课程 - 工厂高级特性 第十章.对象的生命周期 1. 什么是对象的生命周期 指的是一个对象创建.存活.消亡的一个完整过程 2. 为什么要学习对象的生命周期 由Spring ...

  4. delphi 官方例子 simples 路径

    公用 文件件 可能是隐藏的 若是的话 则显示 隐藏

  5. Window Server+IIS配置实现一台服务器绑定多个HTTPS证书

    参考原文链接:https://blog.csdn.net/lengyiqiu/article/details/89182239 此处做个记录防止丢失: 直接上步骤: 1.选安装好SSL证书,供下面配置 ...

  6. Js捕获异常的方法

    Js捕获异常的方法 JavaScript的异常主要使用try catch finally语句以及窗口对象window的onerror事件来捕获. try catch finally try catch ...

  7. vscode添加自定义html片段

    最近在学vue,用的是微软的vscode 开发工具. 很不错,赞一下微软.里面包含了众多插件大家可以各取所需. 另外有一项实用的功能,User Snippets 用户自定义代码段, 对于那些需要重复编 ...

  8. 多态,__new__魔术方法,单态模式---day22

    1.多态 # ### 多态:不同的子类对象,调用相同的父类方法,产生了不同的执行效果 ''' 关键字:继承 改写 ''' class Soldier(): #攻击 def attack(): pass ...

  9. django学习第十四天--Forms和ModelForm

    Forms和ModelForm 进行数据校验,先看数据校验的过程 注册页面图解: 前端为了用户体验会做一些校验,不满足校验要求会报错 服务端也会对数据进行一些校验,不满足校验要求会报错 数据库也会对数 ...

  10. java个人博客

    效果浏览 首页 详情页 Aboutme 后台管理 管理/添加博客 添加分类 管理员管理 友情链接 访问地址 前台地址http://localhost 后台地址:http://localhost/adm ...