Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: 使用约定式路由部署至Github pages时,刷新页面会404 #5846

Closed
zzmelody opened this issue Jun 18, 2024 · 3 comments
Closed
Labels
bug Something isn't working

Comments

@zzmelody
Copy link

版本信息

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz    
    Memory: 9.09 GB / 31.83 GB
  Browsers:
    Edge: Spartan (44.19041.3636.0), Chromium (125.0.2535.92)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    @modern-js/app-tools: 2.53.0 => 2.53.0
    @modern-js/eslint-config: 2.53.0 => 2.53.0
    @modern-js/plugin-ssg: 2.53.0 => 2.53.0
    @modern-js/runtime: 2.53.0 => 2.53.0
    @modern-js/tsconfig: 2.53.0 => 2.53.0

问题详情

项目使用约定式路由,通过 assetPrefix参数修改资源路径至 github pages对应项目路径,可以打开页面,并正确跳转路由;但是跳转路由后刷新页面时会404,提示找不到页面,以下是 modern.config.ts内容(下方的 dist在打包时会替换为 项目名称):

import { appTools, defineConfig } from '@modern-js/app-tools';

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
	output: {
		distPath: {
			html: '',
		},
		assetPrefix: '/../dist',
	},
	html: {
		disableHtmlFolder: true,
	},
	source: {
		mainEntryName: 'index',
	},
	server: {
		baseUrl: '/dist',
	},
	runtime: {
		router: {
			basename: '/dist',
		},
		state: true,
	},
	plugins: [
		appTools({
			bundler: 'experimental-rspack',
		}),
	],
});

复现链接

复现步骤

  1. 使用modernjs 创建一个webapp项目,使用上方我的 modern.config.ts配置
  2. 使用约定式路由创建两个页面, / , /a
  3. 部署至github pages 或者gitlab pages
  4. 打开页面,跳转至 a 路由,刷新页面
@zzmelody zzmelody added the bug Something isn't working label Jun 18, 2024
@zllkjc
Copy link
Member

zllkjc commented Jun 18, 2024

github page 是不是默认情况下不支持 SPA 的

@zzmelody
Copy link
Author

github page 是不是默认情况下不支持 SPA 的

好的,谢谢,我试试用404.html的方式来实现下看看

@zzmelody
Copy link
Author

zzmelody commented Jun 19, 2024

结合这篇文章解决了 GitHub Pages 如何实现 SPA
不过在modernjs里面,index.html(入口组件中)中要用 useNavigate来进行跳转,不能用 history.replaceState

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants