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…

使用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 …

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

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

数据结构——(双)链表

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

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。本文详细记录了硬件选择…

烟雾自动监测报警摄像机

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

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

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

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

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

ADC 性能规格-静态性能- (2) - 偏移误差( offset error)和满标度增益误差(full scale gain error)

偏移误差(Offset error) 失调(Offset) 定义:失调是指ADC输出数字代码中零位与实际模拟输入零位之间的差异。简单来说,就是当输入信号为零时,ADC输出的数字代码并不一定是零,这个偏差就是失调。影响:失调会影响ADC的整体精度,因为它在整个输入范围内引入了一个固定的偏…

智慧水利引领行业转型:探讨智慧水利解决方案在水务管理、灾害预警及水资源保护中的前沿应用与挑战

本文关键词:智慧水利、智慧水利工程、智慧水利发展前景、智慧水利技术、智慧水利信息化系统、智慧水利解决方案、数字水利和智慧水利、数字水利工程、数字水利建设、数字水利概念、人水和协、智慧水库、智慧水库管理平台、智慧水库建设方案、智慧水库解决方案、智慧…

ExcelToDB2:批量导入Excel到IBM DB2数据库的自动化工具

ExcelToDB2:批量导入Excel到IBM DB2数据库的自动化工具 简介 ExcelToDB2是一个可以批量导入Excel到IBM DB2数据库的自动化工具。支持将xls/xlsx/xlsm/xlsb/csv/txt/xml格式的Excel文件导入到IBM DB2等多种原生及国产数据库。自动化是其最大的特点,因为它…

MVPT: Multitask Vision-Language Prompt Tuning

摘要 提示调整(Prompt Tuning)是一种针对特定任务的学习提示向量的调节,已成为一种数据高效和参数高效的方法,用于使大型预训练的视觉语言模型适应多个下游任务。然而,现有的方法通常是从头开始独立地学习每个任务的提示向量,从而…

docker-compose安装PolarDB-PG数据库

文章目录 一. Mac1.1 docker-compose.yaml1.2 部署1.3 卸载4. 连接 二. Win102.1 docker-compose.yaml2.2 部署2.3 卸载 参考官方文档 基于单机文件系统部署 一. Mac 1.1 docker-compose.yaml mkdir -p /Users/wanfei/docker-compose/polardb-pg && cd /Users/wanfei…

开放式耳机哪款性价比高?这五款超值精品不容错过

喜欢进行户外运动的小伙伴们,应该都很需要一款既可以匹配运动场景,又兼顾音质体验的无线蓝牙耳机吧。而开放式耳机拥有佩戴舒适牢固,不堵塞耳部,不影响外部声音传入耳部的优点,完全可以成为运动健身人士户外运动的好伴…

【JavaScript 算法】深度优先搜索:探索所有可能的路径

🔥 个人主页:空白诗 文章目录 一、算法原理二、算法实现三、应用场景四、优化与扩展五、总结 深度优先搜索(Depth-First Search, DFS)是一种用于遍历或搜索图或树数据结构的算法。该算法尽可能深入图的分支,探索所有可…