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

news2024/9/22 9:41:39

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.coloradmin.cn/o/1921626.html

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

相关文章

如何选择一款适合自己的鼠标?

在今天的数字时代,鼠标已经成为人们日常办公和娱乐的不可或缺的工具之一。然而,市面上各式各样的鼠标琳琅满目,如何选择一款适合自己的鼠标成为了一个令人困惑的问题。 鼠标的类型 在选择鼠标时,首先需要了解鼠标的类型。常见的…

前端遇见复杂的数据结构怎么办?

对象包含一个属性名会变的数组 for (let [name, value] of Object.entries(res.data)) {console.log(name,value)} 即可解决 语法:Object.entries(obj) 返回值:给定对象自身可枚举属性的键值对数组。 const obj { name: xiaoming, age: seven,sex: man,…

C++:从C语言过渡到C++

在这篇博客中,我将会介绍从C语言过渡到C的一些基础知识。 目录 C起源 C的关键字 输出hello,world ​编辑 命名空间 1.什么是命名空间 2.namespace的作用 3.域作用限定符 4.命名空间的使用 IO流 缺省参数 函数重载 引用 1.引用的定义 2.引…

Halcon 圆形检测(测量模型)

Halcon 圆形检测(测量模型) 资源 链接:https://pan.baidu.com/s/1icVPSCsnYLxfnyCkARLMog 提取码:47rj 原始图片 代码 * 1.读取图片 ******************************************** dev_update_off () read_image (Image, ./pa…

MySQL 9.0 正式发行Innovation创新版已支持向量

从 MySQL 8.1 开始,官方启用了新的版本模型:MySQL 创新版 (Innovation) 和长期支持版 (LTS)。 根据介绍,两者的质量都已达到可用于生产环境级别。区别在于: 如果希望尝试最新的功能和改进,并喜欢与最新技术保持同步&am…

成本下降50%,腾讯音乐StarRocks存算分离大规模实践!

作者:腾讯音乐高级数据工程师 陈嘉奇,腾讯音乐高级运营开发工程师 高盛远 小编导读: 腾讯音乐娱乐集团是中国在线音乐娱乐服务开拓者,提供如 QQ 音乐、酷狗音乐等众多知名的移动音频产品。 随着对成本效益的关注不断增强及湖仓一体化技术不断…

公益快报 | 中科亿海微以企业奖学金为纽带,深化校企合作

近日,为回报母校、激励湖南大学机器人视觉感知与控制技术国家工程研究中心广大学生,中科亿海微电子科技(苏州)有限公司(简称“中科亿海微”)捐赠设立企业奖学金。此项奖学金的设立标志着校企合作迈向全方位…

【Google 浏览器离线下载】

Google 浏览器离线下载: https://www.google.cn/chrome/index.html?standalone1#updates 点击“ 在此下载” , 即可下载 Google 浏览器离线版

vue+cesium之加载天地图影像底图与注记

目录 1.创建地图容器2.叠加天地图影像底图与矢量注记 关键代码3.示例效果图 Cesium是默认加载了微软公司的Bing地图,并提供了BingMapslmageryProvider类来加载Bing地图。也就是说,在创建Viewer时,如果不指定lmageryProvider类就默认加载Bing地…

C# .net6使用Hangfire

首先我们先来了解什么是Hangfire? Hangfire 是一个用于 .NET 的任务调度库,允许你在后台运行任务,而不需要依赖外部的任务队列服务或复杂的基础设施。它简化了后台任务的创建、调度和管理过程,使得在 .NET 应用程序中处理长期运行…

《mysql篇》--JDBC编程

JDBC是什么 JDBC就是Java DataBase Connectivity的缩写,翻译过来就很好理解了,就是java连接数据库。所以顾名思义,JDBC就是一种用于执行SQL语句的JavaApl,是Java中的数据库连接规范。为了可以方便的用Java连接各种数据库&#xff…

MURF1660CT-ASEMI智能AI应用MURF1660CT

编辑:ll MURF1660CT-ASEMI智能AI应用MURF1660CT 型号:MURF1660CT 品牌:ASEMI 封装:TO-220F 批号:最新 恢复时间:35ns 最大平均正向电流(IF):16A 最大循环峰值反向…

【学术会议征稿】第五届智能设计国际会议(ICID 2024)

第五届智能设计国际会议(ICID 2024) 2024 5th International Conference on Intelligent Design (ICID 2024) 为贯彻落实国家创新驱动发展战略,积极服务秦创原创新驱动平台建设,助力区域经济高质量创新发展,西安设计联…

nVisual光纤资源管理APP价值分析

nVisual光纤资源管理APP利用数字孪生技术,可以快速创建光纤资源的数字孪生空间,解决“排查难”和“跟踪难”的问题。提供了预先在数字空间进行智能规划模拟变更、自动生成实施步骤和材料清单等功能,大幅度提高了规划的效率与准确性&#xff0…

uniapp实现光标闪烁(配合自己的键盘)

前言 因为公司业务需要&#xff0c;所以我们... 演示 其实就是Chat自动打字效果 代码 键盘请看这篇文件 <template> <view class"list"><view class"title"><text>手机号码</text></view><view class"ty…

怎么提高图片亮度?这四种方法轻松提高图片亮度!

怎么提高图片亮度&#xff1f;在数字图像处理的世界里&#xff0c;图片亮度不足的问题常常如暗夜的阴影般困扰着我们&#xff0c;这一问题不容忽视&#xff0c;因为它犹如一颗定时炸弹&#xff0c;随时可能引发一系列连锁反应&#xff0c;首先&#xff0c;亮度不足的图片如同被…

【轻松拿捏 】Java-static关键字(面试)

Java-static关键字 1. 定义和基本概念 回答要点&#xff1a; 示例回答&#xff1a; 2. static 变量 回答要点&#xff1a; 示例回答&#xff1a; 代码示例&#xff1a; 3. static方法 回答要点&#xff1a; 示例回答&#xff1a; 代码示例&#xff1a; 4. static 代…

Armv8-R内存模型详解

目录 1.内存模型的必要性 2.Armv8-R内存模型分类 2.1 Normal memory 2.2 Device Memory 2.2.1 Gathering 2.2.2 Reordering 2.2.3 Early Write Acknowledgement 3.小结 大家好&#xff0c;今天是悲伤的肌肉。 在调研区域控制器芯片时&#xff0c;发现了S32Z、Stellar …

威纶通触摸屏连接MySQL数据库步骤

目录 概要威纶通支持数据库的触摸屏类型测试Step 1 选择触摸屏型号Step 2 新增数据库服务器Step 3 添加SQL数据库查询功能Step 4 仿真测试 概要 通过使用威纶通带数据库类型的触摸屏&#xff0c;实现连接本地/远程MySQL数据库&#xff0c;并实现数据查询功能 威纶通支持数据库…

【开发环境】搭建PX4+ROS2+MAVROS2+Simulink+Optitrack实物联合仿真环境

搭建PX4ROS2MAVROS2SimulinkOptiTrack实物联合仿真环境 Ubuntu中的安装过程下载并编译PX4固件代码安装ROS2安装VRPN动捕数据转换ROS2话题库安装VRPN库拉取vrpn_client_ros2节点代码并配置VRPN server参数编译软件包启动vrpn_client_ros2节点重命名话题名 /vrpn/fly/pose 为 /ma…