我正在使用Create-react-app,通过npm start
命令在开发服务器中提供我的应用程序。默认情况下,应用程序从https://localhost:3000/提供。但是,我的应用程序使用需要特定上下文路径的Cookie。我怎样才能将应用程序从https://localhost:3000/app/提供出来呢?
我正在使用Create-react-app,通过npm start
命令在开发服务器中提供我的应用程序。默认情况下,应用程序从https://localhost:3000/提供。但是,我的应用程序使用需要特定上下文路径的Cookie。我怎样才能将应用程序从https://localhost:3000/app/提供出来呢?
"homepage": "http://mywebsite.com/relativepath"
,详细信息请参考此文档: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
在这里您有几个选项。
生产模式
将环境变量PUBLIC_PATH
设置为/app/
或者
如其他答案中所述,在package.json
中使用homepage
字段
开发模式
配置被硬编码到应用程序中。您需要先运行eject
以进行任何编辑。
步骤1
npm run eject
步骤2
在config/webpack.config.js
中,找到下面的部分(大约在第67-68行附近)
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/';
改为
const publicPath = isEnvProduction
? paths.servedPath
: isEnvDevelopment && '/app/';
步骤三
在config/webpackDevServer.config.js
文件中,找到以下部分(大约在60-65行附近):
// It is important to tell WebpackDevServer to use the same "root" path
// as we specified in the config. In development, we always serve from /.
publicPath: '/',
并更改为
publicPath: '/app',
步骤 4
npm start
我已经用以下方法解决了这个问题:
<BrowserRouter basename="/app" />
<Link to="/test" />
使用此解决方案,该 Link
路径为 /app/test
。
另一个例子:
<BrowserRouter basename="/app">
<Routes>
<Route element={<Home />} path="/" exact />
<Route element={<Test />} path="/test" />
</Routes>
</BrowserRouter>
PUBLIC_URL
,它似乎可以胜任这项工作。 - Miroslav Nedyalkov