React/Vue 项目在 GitHub Pages 上部署时资源的路径问题

GitHub Pages 常被用来部署个人博客,而无论是大名鼎鼎的 Jekyll,还是 Hugo 或者 Hexo,他们都是将我们的文章嵌入模板,发布为静态页面,也就是说,GitHub Pages (Gitee Pages) 只支持托管静态页面,包括页面所需的静态资源。
如我们所知, React 和 Vue 都包含一个对应的路由插件,而这个路由插件会有两种模式: Hash 模式 和 History 模式。关于两者最的基本区别可以参考 Vue-Router 中的描述,下一段是阐述,熟悉 Router 的话可以跳过。
React 和 Vue 的路由旨在使得构建单页面应用更加方便。单页面应用中各屏展示的内容其实是由 JavaScript 渲染完成,所以,以 Vue 的 History 模式为例, 假设天才程序猿王花花的 GitHub 账号为 http://whh.github.io/
,他写了一个 Vue 音乐应用并上传到仓库 http://whh.github.io/music
,其中的 “关于” 页面是 /about
,当我们访问该页面时,我们的页面并未直接向后台发送请求,而浏览器的地址栏中却看似已经 “跳转” 到该页面了,显示为 http://whh.github.io/about
。
接着,我们简单提一下 GitHub Pages。我们将项目分为两类:项目名为 用户名.github.io
,普通项目。前者发布后的地址为 https://用户名.github.io/
,后者的地址为 https://用户名.github.io/项目名
。
当我们将 Vue 打包好的 /dist
文件夹作为 GitHub Pages 的目录时,如果该项目为上述第二种,我们会发现王花花的 “关于” 页面的资源地址为 /css/xxx.css
,即浏览器请求的地址为 http://whh.github.io/css/xxx.css
,而我们的资源实际的存放地址为http://whh.github.io/music/css/xxx.css
,因为我们的 css 文件在 music 项目下,这时就会有问题了。
因为打包后页面中的资源链接地址 /css/xxx.css
是绝对路径,找到问题后,我们可以将地址改为相对路径 ./css/xxx.css
,在 Vue 最新的脚手架工具 @vue/cli 3.0+
中,我们可以通过配置 vue.config.js
文件来修改 baseUrl
为 './'
,在 React 中可以修改 PUBLIC_URL
,找到 node_modules/react-script/config/paths.js
中如下一段:
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/
');
return ensureSlash(servedUrl, true);
}
把 '/'
改为 './'
即可。然后再次打包。
不理智的建议:其实你也可以根据项目名去更改 baseUrl
和 PUBLIC_URL
。
哈希模式 实际上是一样的,资源的路径也需要修改一下。
但是当我们的项目是类似以 whh.github.io
命名时,就不需要考虑该问题,因为这个项目的 GitHub Pages 所需的资源就在根目录下,而不是在二级目录 https://whh.github.io/music
中,体会一下。
React/Vue 项目在 GitHub Pages 上部署时资源的路径问题的更多相关文章
- 在github Pages上部署octopress搭建个人博客系统
原文链接:http://caiqinghua.github.io/blog/2013/08/26/deploy-octopress-to-github-pages/ 引子 上一篇博客已经说了为什么要搭 ...
- 使用 github pages快速部署自己的静态网页
看见很多大神在Github Pages上部署Demo,感觉效果还不错,刚才自己也试了一下,发现其实并不难! 选择 github pages 的理由 使用零成本: github pages 集成在 gi ...
- 利用Octopress在github pages上搭建个人博客
利用Octopress在github pages上搭建个人博客 SEP 29TH, 2013 在GitHub Pages上用Octopress搭建博客,需要安装ruby环境.git环境等.本人在Fed ...
- 用Octopress在Github pages上写博客
安装Git环境 下载msysgit(git for windows),并安装. 可以选择安装TortoiseGit,这个在windows的资源管理器里装了很多git的右键菜单,对git命令行不熟悉的同 ...
- 让搭建在 Github Pages 上的 Hexo 博客可以被 Google 搜索到
title: 让搭建在Github Pages上的Hexo博客可以被Google搜索到 date: 2019-05-30 23:35:44 tags: 配置 --- 准备工作 搭建好的博客 npm & ...
- Django项目在Linux服务器上部署和躺过的坑
引言 在各方的推荐下,领导让我在测试环境部署之前开发的测试数据预报平台.那么问题来了,既然要在服务器上部署, 就需要准备: 1.linux服务器配置 2.linux安装python环境搭建与配置 3. ...
- skiasharp在阿里云Windows server 2016上部署时提示The type initializer for 'SkiaSharp.SKAbstractManagedStream' threw an exception. 错误
应用环境及问题描述: Windows Server 2016,.Net core 2.1, Skiasharp作为跨平台的图像处理组件在生成缩略图时出错,本地测试都是正常的,部署到服务器无法生成缩略图 ...
- 使用jekyll在GitHub Pages上搭建个人博客【转】
网上有不少资源,但大多是“授人以鱼”,文中一步一步的告诉你怎么做,却没有解释为什么,以及他是如何知道的.他们默认着你知道种种专业名词的含义,默认着你掌握着特定技能.你折腾半天,查资料,看教程,一步步下 ...
- vue-router+webpack线上部署时单页项目路由,刷新页面出现404问题
使用vue项目,线上部署的时候,访问首页以及通过路由打开二级页面没有问题,但是一刷新就出现404现象 因为刷新页面时访问的资源在服务端找不到,因为vue-router设置的路由不是真实存在的路径. 解 ...
随机推荐
- RPA账户和密码管理方案
如何将登录业务系统的账户和密码"更好的,更合适"地交给RPA? 相信很多小伙伴们在做RPA的时候, 都会或多或少的遇到类似的问题. 正常情况下IT管理人员都会给真实的业务人员分配业 ...
- nim_duilib(5)之option
introduction 更多控件用法,请参考 here 和 源码. 本文的代码基于这里 xml文件添加代码 基于上一篇, 继续向basic.xml中添加下面关于Option的代码. xml完整源码在 ...
- 【LeetCode】257. Binary Tree Paths 解题报告(java & python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 迭代 日期 题目地址:https://leet ...
- 【LeetCode】769. Max Chunks To Make Sorted 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- 「双串最长公共子串」SP1811 LCS - Longest Common Substring
知识点: SAM,SA,单调栈,Hash 原题面 Luogu 来自 poj 的双倍经验 简述 给定两字符串 \(S_1, S_2\),求它们的最长公共子串长度. \(|S_1|,|S_2|\le 2. ...
- Interval Bound Propagation (IBP)
目录 概 主要内容 IBP CROWN CROWN-IBP 训练的技巧 写在最后 代码 Gowal S., Dvijotham K., Stanforth R., Bunel R., Qin C., ...
- Android开发 ListView(垂直滚动列表项视图)的简单使用
效果图: 使用方法: 1.在布局文件中加入ListView控件: <?xml version="1.0" encoding="utf-8"?> &l ...
- 编写Java程序,使用ThreadLocal类,项目中创建账户类 Account,类中包括账户名称name、 ThreadLocal 类的引用变量amount,表示存款
查看本章节 查看作业目录 需求说明: 某用户共有两张银行卡,账户名称相同,但卡号和余额不同.模拟用户使用这两张银行卡进行消费的过程,并打印出消费明细 实现思路: 项目中创建账户类 Account,类中 ...
- 编写Java程序,实现多线程操作同一个实例变量的操作会引发多线程并发的安全问题。
查看本章节 查看作业目录 需求说明: 多线程操作同一个实例变量的操作会引发多线程并发的安全问题.现有 3 个线程代表 3 只猴子,对类中的一个整型变量 count(代表花的总数,共 20 朵花)进行操 ...
- PHP 中的多进程使用,进程通信、进程信号等详解
多进程环境要求 Linux 系统 php-cli 模式 pcntl 扩展 或 swoole 扩展 pcntl 扩展 <?php $str = "hello world!" . ...