在 gh-pages 上使用 stencil-router

Question

我正在尝试在 gh-pages 上部署模板 SPA，但我无法让路由器合作。我在 stencil-router 上设置 root，但它没有加载我的任何路线。当我运行 localhost.

时它工作得很好

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

注意 gh-pages 使用 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/ 对比 /lightpaintlive-www/

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

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

Answer 2

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

在 gh-pages 上使用 stencil-router

Using stencil-router on gh-pages

web-component

single-page-application

stenciljs