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: '/' 是安全的。记得根据实际部署情况调整这个配置。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

粉笔推出国内首个职教行业大模型,助力学员高效学习

7月12日,粉笔正式推出其自主研发的首个专注于职教行业的垂域大模型,并将于8月1日上线粉笔AI老师 “粉笔头”,为学员提供个性化、智能化的辅导服务。 在垂域大模型的基础上,粉笔结合10年来的教研积累、独有数据搭建RAG系统&#x…

java上手

java上手 文章目录 java上手0.注释1.简单的输出2.从控制台读取输入3.标识符4.变量5.赋值6.常量7.命名习惯 0.注释 // 单行注释 /*多行注释*/ /**对类和方法进行说明*/1.简单的输出 public class HelloWorld{public static void main(String[] args){System.out.println("…

使用MAVSDK向PX4模拟器发送启飞与降落指令

1.使用docker启动PX4模拟器 docker run --rm -it jonasvautherin/px4-gazebo-headless:1.14.3 开始启动 启动中 PX4启动成功 创建QGC连接 mavlink start -p -u 14556 -t 192.168.1.66 -o 14550 启动QGC连接PX4模拟器 在QGC中执行各种指令

TensorFlow系列:第五讲:移动端部署模型

项目地址:https://github.com/LionJackson/imageClassification Flutter项目地址:https://github.com/LionJackson/flutter_image 一. 模型转换 编写tflite模型工具类: import osimport PIL import tensorflow as tf import keras import …

电子画册制作全攻略,从零开始制作

在这个数字化时代,电子画册作为一种新型的传播媒介,已经越来越受到人们的青睐。它以生动活泼、互动性强、传播速度快等特点,迅速成为了企业宣传、个人展示的优质选择。那么,如何从零开始制作一款引人入胜的电子画册呢?…

pdf文件如何快速英文转中文?

要将 PDF 文件中的英文内容转换为中文,你可以使用以下几种方法: 1、在线翻译工具: 使用网上的免费在线翻译工具,如Google翻译、百度翻译或有道翻译,将整个 PDF 文档粘贴到工具中进行翻译。 2、专业翻译软件&#xf…

数据结构——(双)链表

文章目录 1. 定义 2. 双链表和单链表的区别 3. 代码示例 3.1 双链表节点和结构定义 3.2 初始化双链表 3.3 返回双链表的长度 3.4 在指定位置插入元素 3.5 在末尾插入元素 3.6 删除指定位置的元素并返回被删除的元素 3.7 删除末尾元素 3.8 获取指定位置的元素 3.9 修…

笔记:使用Microsoft.EntityFrameworkCore.Proxies做数据库延迟加载

一、目的: Microsoft.EntityFrameworkCore.Proxies 是一个Entity Framework Core的扩展包,它提供了对延迟加载的支持。延迟加载是一种ORM(对象关系映射)行为,允许在首次访问导航属性时,自动从数据库加载相关…

面向对象进阶基础练习

Java学习笔记(新手纯小白向) 第一章 JAVA基础概念 第二章 JAVA安装和环境配置 第三章 IntelliJ IDEA安装 第四章 运算符 第五章 运算符联系 第六章 判断与循环 第七章 判断与循环练习 第八章 循环高级综合 第九章 数组介绍及其内存图 第十章 数…

AI网络爬虫019:搜狗图片的时间戳反爬虫应对策略

文章目录 一、介绍二、输入内容三、输出内容一、介绍 如何批量爬取下载搜狗图片搜索结果页面的图片?以孙允珠这个关键词的搜索结果为例: https://pic.sogou.com/pics? 翻页规律如下: https://pic.sogou.com/napi/pc/searchList?mode=2&start=384&xml_len=48&am…

C语言作业7 指针实现strlen,strcpy,strcmp和strstr功能

1、自定义函数(my_strlen)实现strlen函数的功能 2、自定义函数(my_strcpy)实现strcpy函数的功能 3、自定义函数(my_strcmp)实现strcmp函数的功能 4、自定义函数(my_strcat)实现strcat函数的功能 5、自定义函数(my_strstr)实现求src字符串中是否包含子串dest字符串 #include &l…

【C++】入门基础(一)

目录 一.命名空间:namespace 1.namespace的价值 2.namespace的定义 3.namespace的使用方法 3.1 域解析运算符:: 3.2 using展开 3.3 using域解析运算符 二.输入输出 三.缺省参数 四.函数重载 1.参数类型不同 2.参数个数不同 3.参数顺序不同 一.命名空间&…

开源项目的认识理解

目录 开源项目有哪些机遇与挑战? 1.开源项目的发展趋势 2.开源的经验分享(向大佬请教与上网查询) 3.开源项目的挑战 开源项目有哪些机遇与挑战? 1.开源项目的发展趋势 1. 持续增长与普及 - 开源项目将继续增长&#xff0c…

从小主机到第一台自组装NAS:升级与优化记录

目录 前言硬件系统安装的波折过程问题解决系统安装 套件/dockerjellyfin 功耗测试刚安装好系统插上缓存盘且运行了更多的套件和 docker 容器之后 温度场景一场景二场景三 后记参考 在使用了一年的小主机 NAS 后,我决定自己组装并安装新 NAS。本文详细记录了硬件选择…

烟雾自动监测报警摄像机

当今社会,安全意识日益增强,各种智能监测技术也在不断创新发展。烟雾自动监测报警摄像机作为其中的一种重要应用,正在为人们的生活和财产安全提供更加全面的保护。烟雾自动监测报警摄像机集成了先进的传感器技术和智能算法,能够高…

【FPGA】FPGA上的看门狗定时器(WDT):科普与应用

什么是看门狗定时器? 看门狗定时器(Watchdog Timer, WDT)是一种在电子系统中用于防止系统卡死或故障的安全机制。它通过在预定时间后重置系统或触发一个中断来保证系统的稳定运行。如果系统由于某些原因无法正常工作,看门狗定时器…

C++ --> 类和对象(二)

前言 在前面简单的介绍了OOP,什么是类,在类中的this指针。接下来就深入理解类和对象。 默认成员函数 默认构造函数:用于在创建对象时初始化对象的成员变量。默认拷贝构造函数:用于使用已存在的对象来初始化新创建的对象。默认析构…

图像搜索技术在司法证据分析中的应用:思通数科大模型的创新实践

引言 在司法侦查过程中,图像和视频证据的分析对于案件的侦破至关重要。随着人工智能技术的快速发展,图像搜索技术已成为司法领域的关键工具。本文将探讨如何结合思通数科的大模型,利用图像搜索技术对案件中的图片或视频证据进行深度分析&…

【前端】css控制背景图片缩放

在CSS中,控制背景图片的缩放主要依赖于background-size属性。这个属性允许你指定背景图片的尺寸,包括是否保持其原有的宽高比。background-size可以接受不同的值来控制图片的缩放方式。 常用的background-size值 auto:默认值。背景图像保持其…

同时用到,网页,java程序,数据库的web小应用

具体实现功能:通过网页传输添加用户的请求,需要通过JDBC来向 MySql 添加一个用户数据 第一步,部署所有需要用到的工具 IDEA(2021.1),Tomcat(9),谷歌浏览器,MySql,jdk(17) 第二步,创建java项目,提前部署数…