创建-反应,应用CSS和JS路径

创建-反应,应用CSS和JS路径

问题描述:

运行后Create React Appnpm run build,创建index.html看起来是这样的:创建-反应,应用CSS和JS路径

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>React App</title><link rel="shortcut icon" href="/favicon.ico"><link href="/main.e606e04b6e0092a87205a9dc4662479c.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="/main.35180d284d8a2058f717.js"></script></body></html> 

两者scriptlinksrc/href -attributes,指向错误的方向。应该删除领先的/,因为所有生成的文件都在同一个目录中。这是一个错误还是我可以以某种方式配置这些路径?

+0

这不是一个错误。它确保它将不同路线上的这些特定文件放在索引的 –

生成的文件应该从Web服务器提供。当您运行npm run build时,您应该看到有关在该目录中启动简单本地Web服务器的说明。如果您将此目录部署到真实的Web服务器并从根服务器index.html,它也将正常工作。

如果生成的文件引用的脚本没有/,那么只要添加客户端路由,您的站点就会中断。例如,如果应用程序位于mysite.com,但也处理类似mysite.com/about的URL,则相对路径会导致脚本从mysite.com/about/*.js加载,这将是404错误。这就是为什么所有路径默认从root开始

如果你想从一个子目录满足您的应用程序(从例如myuser.github.io/myproject),你将需要添加"homepage"场在package.json,例如:

"homepage": "http://myuser.github.io/myproject" 

创建反应应用将推断正确的根路径基于homepage设置。此功能自[email protected]

请阅读deployment instructions了解更多信息。

+0

之外。好的,谢谢! – Chris

+4

我设置了'{“homepage”:“。”}',然后重新运行'phonegap run build'。链接更改为'src =“./main.123456.js”'。现在我的应用程序在phonegap上工作:-) – OoDeLally

+2

尽管在某些情况下可行,但我们并不正式支持'{“homepage”:“。”}}。它在其他情况下打破。 –