vue项目部署到github pages后页面显示不出来??

问题:

当我们在命令行执行 npm run build 后,项目的目录下会生成一个 dist 文件夹,它里面又包含一个 static 文件夹和一个 index.html 文件,这是 webpack 最终打包好的文件
在这里插入图片描述

项目上传到仓库后发现页面为空,找不到文件路径..

咦,为什么页面显示是空白的?打开控制台,细心的朋友可能会发现, script 标签的引入路径好像不对啊,因为 static 文件夹和 index.html 是在同一个目录下的,这里却是从根目录引入 static 下的文件,正确的路径应该是 ./ 开头的相对路径: src=’./static/…’ 或者 src=‘static/…’

解决方法:

找到vite.config.js文件,添加一行base属性,值为你的仓库名称,示例如下。

export default defineConfig({base: '/zwBlog/',// 仓库名称
})

这样可以就可以找到你的文件位置啦!

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

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

相关文章

ROS基本框架2——在ROS开发中创建并使用自定义消息(C++版本)

ROS基本框架2——在ROS开发中创建并使用自定义消息(C++版本) code review! 参考笔记 1.ROS基本框架1——编写简单的发布者和订阅者(C++和Python版本) 2.ROS基本框架2——在ROS开发中创建并使用自定义消息(C++版本) 文章目录 ROS基本框架2——在ROS开发中创建并使用自定义…

ccf A 类与sci 一区那个比较难? + 论文常识

论文常识: ESI 基本科学指标数据库(EssentialScience Indicators ) 高被引论文(Highly Cited Paper):根据同一年同一ESI学科统计最近10年发表论文中被引用次数进入世界前1%的论文;在硕士论文中文献综述是作为论文的理…

异步处理优化:多线程线程池与消息队列的选择与应用

目录 一、异步处理方式引入 (一)异步业务识别 (二)明确异步处理方式 二、多线程线程池(Thread Pool) (一)工作原理 (二)直面优缺点和适用场景 1.需要快…

IS-IS的原理

IS-IS的基本概念: 概述: IS-IS,中间系统到中间系统,是ISO国际标准化组织为它的无连接网络协议设计的一种动态路由协议 IS-IS支持CLNP网络和IP网络,采用数据链路层封装,区别于ospf只支持IP网络&#xff0…

代理ip工具在网络安全中的作用是什么

代理IP工具在网络安全中扮演着至关重要的角色,它们不仅能够帮助用户保护隐私,还能提高网络性能,增强安全性。本文将深入探讨代理IP工具的定义、工作原理以及在网络安全中的具体应用,旨在为读者提供全面的理解和指导。 一、代理IP工…

IDEA 2024 配置Maven

Step 1:确定下载Apache Maven版本 在IDEA 2024中,随便新建一个Maven项目; 在File下拉菜单栏中,找到Setings; 在Build,Execution,Deployment中找到Maven 确定下载的Apache Maven版本应略低于或等于IDEA绑…

107.【C语言】数据结构之二叉树求总节点和第K层节点的个数

目录 1.求二叉树总的节点的个数 1.容易想到的方法 代码 缺陷 思考:能否在TreeSize函数内定义静态变量解决size的问题呢? 其他写法 运行结果 2.最好的方法:分而治之 代码 运行结果 2.求二叉树第K层节点的个数 错误代码 运行结果 修正 运行结果 其他写法 1.求二…

MySQL笔记-启动时log报错Table ‘mysql.user‘ doesn‘t exist

安装好mysql后,正常使用(使用的是rpm版安装的) service mysqld start | stop | restart 不会出现这个问题。 我遇到的情况是在凝思操作系统上,已经存在了一个mysql。网上查找了一些资料,卸载,后可能卸载…

Mybatis 复习

1 什么是MyBatis MyBatis是一个优秀的持久层框架,它对JDBC操作数据库的过程进行封装,使开发者只需要关注 SQL 本身,而不需要花费精力去处理例如注册驱动、创建connection、创建statement、手动设置参数、 结果集检索等JDBC繁杂的过程代码 。…

HNTS-MRG 2024 Challenge:是一个包含200个头颈癌病例的磁共振图像及其标注的公开数据集,旨在推动AI在头颈癌放射治疗自动分割领域的研究。

2024-11-28,由德克萨斯大学MD安德森癌症中心创建HNTS-MRG 2024 Challenge数据集,目的通过公开数据集推动自动分割算法的发展,这对于提高放射治疗的精确性和效率具有重要意义。 数据集地址:HNTS-MRG 2024|癌症放射治疗数据集|医学影像分析数据…

【python】OpenCV—Tracking(10.5)—dlib

文章目录 1、功能描述2、代码实现3、效果展示4、完整代码5、涉及到的库函数dlib.correlation_tracker() 6、参考 1、功能描述 基于 dlib 库,实现指定类别的目标检测和单目标跟踪 2、代码实现 caffe 模型 https://github.com/MediosZ/MobileNet-SSD/tree/master/…

探索温度计的数字化设计:一个可视化温度数据的Web图表案例

随着科技的发展,数据可视化在各个领域中的应用越来越广泛。在温度监控和展示方面,传统的温度计已逐渐被数字化温度计所取代。本文将介绍一个使用Echarts库创建的温度计Web图表,该图表通过动态数据可视化展示了温度值,并通过渐变色…

20241128解决Ubuntu20.04安装libwxgtk3.0-dev异常的问题

20241128解决Ubuntu20.04安装libwxgtk3.0-dev异常的问题 2024/11/28 16:17 缘起:中科创达的高通CM6125开发板的Android10的编译环境需要。 安装异常:rootrootrootroot-X99-Turbo:~$ rootrootrootroot-X99-Turbo:~$ sudo apt-get install libwxgtk3.0-de…

大疆T100大载重吊运植保无人机技术详解

大疆T100作为一款大载重吊运植保无人机,融合了全新的AI和AR功能,旨在进一步提升安全性并满足喷洒、播撒、吊运等多种作业场景的需求。以下是对其技术的详细解析: 一、总体性能 最大起飞重量:149.9公斤 喷洒容量:75升…

arkTS:使用ArkUI实现用户信息的持久化管理与自动填充(PersistentStorage)

arkUI:使用ArkUI实现用户信息的持久化管理与自动填充(PersistentStorage) 1 主要内容说明2 例子2.1 登录页2.1.1登陆页的相关说明2.1.1.1 持久化存储的初始化2.1.1.2 输入框2.1.1.3 记住密码选项2.1.1.4 登录按钮的逻辑2.1.1.5 注册跳转 2.1.…

腾讯云 AI 代码助手:单元测试应用实践

引言 在软件开发这一充满创造性的领域中,开发人员不仅要构建功能强大的软件,还要确保这些软件的稳定性和可靠性。然而,开发过程中并非所有任务都能激发创造力,有些甚至是重复且乏味的。其中,编写单元测试无疑是最令人…

1、Three.js开端准备环境

准备工作 从 CDN 导入 1.安装 VSCode 2.安装 Node.js 3.查看Three.js最新版本 4.如何cdn引入: https://cdn.jsdelivr.net/npm/threev版本号/build/three.module.js 例如:https://cdn.jsdelivr.net/npm/threev0.170.0/build/three.module.js 我们需要…

Python毕业设计选题:基于django+vue的校园影院售票系统

开发语言:Python框架:djangoPython版本:python3.7.7数据库:mysql 5.7数据库工具:Navicat11开发软件:PyCharm 系统展示 管理员登录 管理员功能界面 用户管理 影院信息管理 电影类型管理 电影信息管理 系统…

初窥 HTTP 缓存

引言 对于前端来说, 你肯定听说过 HTTP 缓存。 当然不管你知不知道它, 对于提高网站性能和用户体验, 它都扮演着重要的角色! 它通过在客户端和服务器之间存储和重用先前获取的资源副本, 来减少网络流量和降低资源加载时间, 从而提升用户体验! 以下是 HTTP 缓存的重要性: 减少…

Django 视图层

from django.shortcuts import render, HttpResponse, redirectfrom django.http import JsonResponse1. render: 渲染模板 def index(request):print(reverse(index))return render(request, "index.html")return render(request, index.html, context{name: lisi})…