使用存在基本 URL 问题的工作流程部署到
gh-pages
。实际上我的 dist
文件夹部署在 https://3gwebtrain.github.io/Ultimate-React-23/
git 路径下,名称为 repo
。但部署后,我的应用程序从 https://3gwebtrain.github.io/
搜索文件,这意味着不包含我的 repo
名称。所以我的页面是空白的。
请检查这里:
https://3gwebtrain.github.io/Ultimate-React-23/
有没有办法让 git 部署知道正确的目录来从更新工作流程中获取文件?
这是我当前的工作流程:
name: React Build
on:
push:
branches: ['main']
env:
CI: false
jobs:
build:
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
permissions:
contents: 'read'
id-token: 'write'
pages: 'write'
actions: 'write'
checks: 'write'
deployments: 'write'
strategy:
matrix:
node-version: [18.x]
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- name: Build
run: |
npm install
npm run build
- name: Setup Pages
uses: actions/configure-pages@v2
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
# Upload build directory content
path: 'dist/'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
作为一个简单的我想浏览资产
https://3gwebtrain.github.io/assets/index-cef14fe5.js
进入
https://3gwebtrain.github.io/Ultimate-React-23/assets/index-cef14fe5.js
我通过使用带有
BrowserRouter
的基本名称解决了这个问题
<BrowserRouter basename={import.meta.env.BASE_URL}>
<Routes>
<Route path='/' element={<HomePage />} />
<Route path='product' element={<Product />} />
<Route path='pricing' element={<Pricing />} />
<Route path='app' element={<AppLayout />} />
<Route path='*' element={<Pagenotfound />} />
</Routes>
</BrowserRouter>