是否可以在 `npm start` 上的不同 url 上提供 react 应用程序答案

【问题标题】：Is it possible to serve a react app on diffrent url on `npm start`是否可以在 `npm start` 上的不同 url 上提供 react 应用程序
【发布时间】：2018-10-23 12:15:36
【问题描述】：

默认情况下，在 react 应用程序中，npm start 提供 http://localhost:3000/ 中的 url。我想在开发模式下以不同的 url 为应用程序提供服务，例如 http://localhost:3000/my-app。我该怎么做？

我不想更改应用目录。而不是在localhost:3000 上提供应用程序，我希望它在localhost:3000/my-app url 上提供服务。这意味着localhost:3000/my-app 将是默认网址。这是参考图片

本地应该是http://localhost:3000/my-app insted of http://localhost:3000/

感谢您的提前。

【问题讨论】：

只需添加一个名为\my-app 的路由并像处理主页一样处理它。

标签： node.js reactjs npm

【解决方案1】：

在package.json中添加homepage键：

“主页”：“http://localhost:3000/my-app”，

这将提供此子目录中的所有内容。

【讨论】：

没有工作。我不想更改应用程序目录。而不是在localhost:3000 上提供应用程序，我希望它在localhost:3000/my-app url 上提供服务。这意味着localhost:3000/my-app 将是默认网址
不工作。虽然在脚本中使用了“主页”，但不知何故它不会影响最终的 url

【解决方案2】：

在路由定义中，查找根目录定义。您可能会看到类似这样的内容。

<Route exact path='/' component={StartPage} />

将路径从 '/' 更改为 '/myapp' 即，

<Route exact path='/myapp' component={StartPage} />

【讨论】：

喜欢这个？ . const Routes = ({history}) => { return ( <ConnectedRouter history={history}> <div> <Route exact path="/myapp" component={AppLayout} /> </div> </ConnectedRouter> ); }

【解决方案3】：

在 Windows 中，您可以从 package.json 更改 url 的所有部分。只需修改脚本，start 对于这种情况，就像这样

"start": "set PUBLIC_URL=myapp&&set HOST=DOMAIN-NAME&&set PORT=AppPort&&react-scripts start"

这将有效地配置 npm 以使用 url 打开浏览器

http://DOMAIN-NAME:AppPort/myapp

您也可以配置 HTTPS 协议和证书

"start": "set PUBLIC_URL=myapp&&set HTTPS=true&&set SSL_CRT_FILE=[path to certificate]&&set SSL_KEY_FILE=[path to key file]&&set HOST=DOMAIN-NAME&&set PORT=AppPort&&react-scripts start"

将在

https://DOMAIN-NAME:AppPort/myapp

其他操作系统的解决方案类似

【讨论】：