创建-反应,应用CSS和JS路径
问题描述:
运行后Create React App的npm 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>
两者script
和link
src
/href
-attributes,指向错误的方向。应该删除领先的/
,因为所有生成的文件都在同一个目录中。这是一个错误还是我可以以某种方式配置这些路径?
答
生成的文件应该从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了解更多信息。
这不是一个错误。它确保它将不同路线上的这些特定文件放在索引的 –