Vue3打包发布,刷新出现的空白页面和错误

Vue3打包发布出现的错误:Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of text/html. Strict MIME type checking is enforced for module scripts per HTML spec.

第一次点击访问到这个路径:页面正常:

刷新这个页面,页面空白,点到错误上面显示文件的访问路径有问题

Vite.config.ts:这个配置base:‘/’

打包以后的index.html:

打包以后的index.html文件会自动在script和link的标签上加上./访问,这就是导致页面刷新出不来的原因

解决方案:base去掉‘.‘,因为我发布项目是在根目录下

Index.html打包之后的路径:

以下是base:'./ ' 和base:'/' 的区别:

base:'./':

  1. 这意味着你的项目将以相对路径作为基础路径。
  2. 当你的项目部署在网站的子目录时,使用’./’是很有用的。例如,如果你的应用部署在https://example.com/my-app/,那么资源(如脚本、样式表、图片等)的路径将会相对于 my-app/ 目录。
  3. 使用相对路径可以避免一些路径问题,特别是当你需要在本地打开HTML文件而不是通过服务器时。

base:'/':

  1. 这意味着你的项目将以根路径作为基础路径。
  2. 当你的项目部署在域的根目录时,使用 ‘ / ‘ 是合适的。例如,如果你的应用部署在 https://example.com/,那么资源将会从根目录加载。
  3. 如果你的项目部署在子目录中,但这里配置了 /,那么资源路径可能会出错,因为它们会相对于根目录而不是子目录。
  4. 因此,选择哪种路径取决于你的项目是如何部署的。如果你不确定项目将来会在哪里部署,或者如果你需要在本地和服务器上都可以正常工作,通常建议使用 base: './'。但是,如果你确定项目将始终部署在网站的根目录,那么使用 base: '/' 是安全的。记得根据实际部署情况调整这个配置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/792314.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

北斗GPS天线使用技巧与性能对比

北斗GPS天线使用中注意的问题 多系统兼容性:确保天线不仅能接收北斗信号,还能同时接收其他GNSS系统(如GPS、GLONASS、Galileo)的信号,以提高定位精度和可靠性。 信号频率选择:根据应用需求选择合适的信号…

MFC Ribbon菜单 - 中英文实时切换方法

简介 最近在搞一个老外的项目,本来谈的好好的,纯英文界面。项目接近尾声了,又提出了中英文实时切换的新需求,没办法就只能想办法,毕竟客户最大嘛。 实现方法 还好本来的ribbon英文菜单不复杂,就用纯C编码…

谷歌插件之一键关闭同域名页面

欢迎来到我的博客,代码的世界里,每一行都是一个故事 🎏:你只管努力,剩下的交给时间 🏠 :小破站 谷歌插件之一键关闭同域名页面 前言项目结构mainfest.jsonbackgroud.js 项目实现效果展示展望 前…

【手把手教你使用cgroup配置,十分钟就会】

手把手教你使用cgroup配置,十分钟就会 什么是cgroupcgroup中的参数概念及原理 以 memory为例看下如何配置配置内存限制写一个内存申请脚本执行脚本测试结束语 什么是cgroup cgroups 是Linux内核提供的一种可以限制单个进程或者多个进程所使用资源的机制&#xff0c…

论文降痕降重全攻略:从技巧到工具,助你轻松应对学术挑战

AIGC降重工具:快速降低论文查重率 高查重率是许多毕业生的困扰。通常,高查重率源于过度引用未经修改的参考资料和格式错误。传统的降重方法,如修改文本和增添原创内容,虽必要但耗时且成效不一。 鉴于此,应用AI工具进…

未来互联网的新篇章:深度解析Web3技术

随着技术的不断演进,Web3正逐渐成为引领未来互联网发展的关键驱动力。本文将深入探讨Web3技术的核心概念、关键特征以及其对未来互联网生态的深远影响,旨在帮助读者全面理解和把握这一新兴技术的发展方向和潜力。 1. Web3的基本概念和演进 Web3并非简单…

WindChill软件许可优化解决方案

WindChill软件介绍 WindChill作为PLM系统, 提供了帮助制造商在产品生命周期的各个阶段管理自己的产品的完整功能,其功能强大、高性能的体系结构正是为当今的全球环境而设计的,帮助公司提高生产效率并改善产品质量和性能。 WindChill许可问题…

每日一练 - 理解IGMP组播组信息

下面是路由器 RTB 的部分输出信息, 关于输出信息描述错误的是A.接口上动态加入的组播组个数是 1 B.加入的组播组地址是 225.1.1.2 C.dsplay igmp group 命令用来查看 IGMP 组播组信息,包括通过成员报告动态加入的组播组和通过命令行静态加入的组播组信息 D.最后发…

让你的终端出现花哨明了的打印

本文代码使用较为简单&#xff0c;主要就是为了高亮打印&#xff0c;直接用即可 代码如下&#xff1a; /*** file cout.h* author BigDavid* brief * version 0.1* date 2024-07-10* * copyright Copyright (c) 2024* */ #pragma once #include<stdio.h>#include<uni…

自学鸿蒙HarmonyOS的ArkTS语言<六>警告弹窗AlertDialog和列表选择弹窗ActionSheet

一、警告弹窗 ... Button(点击我可以获取一个警告弹窗).onClick(() > {AlertDialog.show({title: 我是弹窗标题,subtitle: 我是副标题,message: 我是弹窗内容,autoCancel: true, // 点击遮罩层是否关闭alignment: DialogAlignment.Center, // 弹窗位置offset: { dx: 0, dy:…

手机通讯录大营救,恢复sim卡联系人的3个重要方法

在数字化世界的浩瀚海洋中&#xff0c;手机通讯录就像一艘承载着人际关系的生命之船。然而&#xff0c;当这艘船遭遇风浪&#xff0c;即sim卡上的联系人信息意外丢失时&#xff0c;我们该如何进行一场惊心动魄的大营救&#xff0c;找回那些珍贵的联系人呢&#xff1f;别担心&am…

springboot服装购物商城系统-计算机毕业设计源码35058

摘要 服装购物商城系统小程序&#xff0c;依托Spring Boot框架的强大支持&#xff0c;为用户呈现了一个功能丰富、体验流畅的在线购物平台。该系统不仅涵盖了商品展示、用户注册登录、购物车管理、订单处理、支付集成等核心购物流程&#xff0c;还引入了个性化推荐算法&#xf…

排序(一)——冒泡排序、直接插入排序、希尔排序(BubbleSOrt,InsertSort,ShellSort)

欢迎来到繁星的CSDN&#xff0c;本期的内容主要包括冒泡排序(BubbleSort&#xff09;&#xff0c;直接插入排序(InsertSort)&#xff0c;以及插入排序进阶版希尔排序&#xff08;ShellSort&#xff09;。 废话不多说&#xff0c;直接上正题&#xff01; 一、冒泡排序 冒泡排序…

Lumos学习王佩丰Excel第四讲:排序与选择

一、排序 1、简单排序&#xff1a;不要选中一列排序&#xff0c;不然只是局部排序&#xff0c;其他数据都会发生错乱。 2、多条件排序 3、2003版本中超过3个排序条件时如何处理&#xff1a;从最后一个条件到第一个条件倒着按照要求依次排序。 4、按颜色排序 5、自定义排序次序…

探索Kotlin:从K1到K2

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 嘿&#xff0c;小伙伴们&#xff01;今天我们来聊聊Kotlin&#xff0c;这个在安卓开发圈里越来越火的编程语言。…

YoloV8改进策略:卷积篇|Kan行天下之GRAM,KAN遇见Gram多项式V2版本

GRAM&#xff08;GRAM可能是一个新提出的模型或方法的缩写&#xff0c;这里我们根据上下文进行解释&#xff09;受到诸如TorchKAN和ChebyKAN等Kolmogorov-Arnold网络&#xff08;KAN&#xff09;替代方案的启发。GRAM引入了一种简化的KAN模型&#xff0c;但同时利用了Gram多项式…

paddla模型转gguf

在使用ollama配置本地模型时&#xff0c;只支持gguf格式的模型&#xff0c;所以我们首先需要把自己的模型转化为bin格式&#xff0c;本文为paddle&#xff0c;onnx&#xff0c;pytorch格式的模型提供说明&#xff0c;safetensors格式比较简单请参考官方文档&#xff0c;或其它教…

Docker存储目录问题,如何修改Docker默认存储位置?(Docker存储路径、Docker存储空间)etc/docker/daemon.json

文章目录 如何更改docker默认存储路径&#xff1f;版本1&#xff08;没测试&#xff09;版本2&#xff08;可行&#xff09;1. 停止 Docker 服务&#xff1a;2. 创建新的存储目录&#xff1a;3. 修改 Docker 配置文件&#xff1a;4. 移动现有的 Docker 数据&#xff1a;5. 重新…

【Pytorch】Conda环境下载慢换源/删源/恢复默认源

文章目录 背景临时换源永久换源打开conda配置condarc换源执行配置 命令行修改源添加源查看源 删源恢复默认源使用示范 背景 随着实验增多&#xff0c;需要分割创建环境的情况时有出现&#xff0c;在此情况下使用conda create --name xx python3.10 pytorch torchvision pytorc…

香港紧缺什么类型人才?如何通过香港优才计划去香港就业?

香港目前紧缺多种类型的人才&#xff0c;这些需求反映在不同行业和专业领域。以下是根据最新信息整理的紧缺人才概览&#xff1a; 资讯科技&#xff08;IT&#xff09;人才&#xff1a;香港在IT领域&#xff0c;尤其是人工智能、云计算、软件开发、数据分析、用户体验设计&…