我刚开始学习React。
我的页面在本地主机上运行正常。
现在我正在尝试将我的页面托管到Github上。
我已经使用“npm run deploy”进行了托管。
这是我的package.json文件:
现在,当我尝试访问我的页面时,遇到了错误,并且第一个警告最让我担心。
这是我的页面:Github Page
什么是“权限策略”,如何解决它?
我刚开始学习React。
我的页面在本地主机上运行正常。
现在我正在尝试将我的页面托管到Github上。
我已经使用“npm run deploy”进行了托管。
这是我的package.json文件:
现在,当我尝试访问我的页面时,遇到了错误,并且第一个警告最让我担心。
这是我的页面:Github Page
什么是“权限策略”,如何解决它?
基本上你可以忽略它。GitHub托管页面禁用FLoC,这是Google的第三方Cookie替代方案。GitHub和微软似乎都不喜欢它。
我知道可能有点晚了,但我会保留这里,因为我没有看到有人回答如何解决这个问题。
所以我们只需要在index.html
文件中添加这个<meta>
标签即可:
<meta http-equiv="Permissions-Policy" content="interest-cohort=()">
没有人实际上针对回复中的其他错误进行了讨论。问题在于您 CSS 和 JS 文件的链接是错误的。
可以通过检查网络(如果您检查网络)或检查 index.html 文件来解决这个问题。
https://USERNAME.github.io/assets/index-97b0971f.css
它应该有存储库名称。因此,正确的链接应该是:
https://USERNAME.github.io/REPOSITORY/assets/index-97b0971f.css
如果你正在使用一些“前端工具”例如 Vite.js
,你应该前往 vite.config.js
并添加属性 base
,像以下例子一样:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
base: "/tweak/",
//...whatever you had here remains the same
});
我使用在app.js中的路由中添加"exact"单词来解决这个问题,然后进行部署。
看一下你的路径会发生变化,所以你也可以将你的主页路由路径更改为精确的/mvp,在我的情况下...
return <BrowserRouter>
<div className="App">
<Routes>
<Route exact path="/" element={ <Home /> } />
<Route exact path="startcreating" element={ <Start /> } />
<Route exact path="aboutus" element={ <About /> } />
{/* <Route path="signup" element={ <SignUpModel /> } /> */}
</Routes>
</div>
</BrowserRouter>;