在gh页上使用模版路由器

Question

我正试图在gh页面上部署一个模板SPA，但我无法让路由器配合。我正在stencil-router上设置root，但它没有加载我的任何路由。当我运行localhost时，它运行得非常好。

https://positlabs.github.io/lightpaintlive-www/

请注意，gh页面使用repo名称作为路径，因此在部署时它不在主机根目录下。

import { Host, Component, h, State } from '@stencil/core';
@Component({
tag: 'app-root',
styleUrl: 'app-root.css',
shadow: false,
})
export class AppRoot {
@State() base: string
componentWillLoad(){
this.base = document.querySelector('base').getAttribute('href')
console.log('router root', this.base)
}
render() {
return (
<Host>
<stencil-router root={this.base}>
<stencil-route-switch scrollTopOffset={0}>
<stencil-route url="/" component="lpl-landing" exact={true} />
<stencil-route url="/privacy" component="lpl-privacy" />
</stencil-route-switch>
</stencil-router>
</Host>
);
}
}

完整的源代码如下：https://github.com/positlabs/lightpaintlive-www

Answer 1

当我只需要使用路径时，我意识到我使用的是完整的url。

https://positlabs.github.io/lightpaintlive-www/vs/lightpaintlive-www/

我的代码最终看起来是这样的：

this.base = document.querySelector('base').getAttribute('href').match('github') ? '/lightpaintlive-www/' : '/'

Answer 2

我遇到了这个问题，url="/<repo-name>/your-path"适用于github页面。因此，在使用localhost和github页面的情况下，需要使用不同的路径。