web-infra-dev / modern.js

Modern.js is a web engineering system, including a web framework and a npm package solution.
https://modernjs.dev/en/
MIT License
4.4k stars 367 forks source link

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

Closed zzmelody closed 3 months ago

zzmelody commented 3 months ago

版本信息

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 路由,刷新页面
zllkjc commented 3 months ago

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

zzmelody commented 3 months ago

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

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

zzmelody commented 3 months ago

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