create-react-app CSS 和 JS 路径
[英]create-react-app CSS and JS path
问题描述
After running Create React App 's npm run build , the created index.html looks like this:
运行Create React App的npm run build ，创建的index.html如下所示：
<!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>
Both, script and link src / href -attributes, point to the wrong direction. script和link src / href属性都指向错误的方向。 The leading / should be removed, because all generated files are in the same directory.应删除前导/ ，因为所有生成的文件都在同一目录中。 Is this a bug or can I configure these paths somehow?这是一个错误还是我可以以某种方式配置这些路径？
2 个解决方案
解决方案1
26 已采纳 2016-07-25 10:54:40
The generated files are supposed to be served from a web server.生成的文件应该从 Web 服务器提供。 When you run npm run build , you should see the instructions on starting a simple local web server in that directory.当您运行npm run build ，您应该会看到有关在该目录中启动简单本地 Web 服务器的说明。 If you deploy this directory to a real web server and serve index.html from the root, it will also work fine.如果您将此目录部署到真正的 Web 服务器并从根目录提供index.html ，它也可以正常工作。
If the generated file referenced scripts without / , your site would break as soon as you add client side routing.如果生成的文件引用了没有/脚本，则一旦添加客户端路由，您的站点就会中断。 For example, if an app is located at mysite.com but also handles a URL like mysite.com/about , relative paths would cause scripts to be loaded from mysite.com/about/*.js which would be a 404 error.例如，如果应用程序位于mysite.com但也处理类似mysite.com/about的 URL，则相对路径将导致从mysite.com/about/*.js加载脚本，这将是 404 错误。 This is why all paths start from root by default.这就是默认情况下所有路径都从 root 开始的原因。
If you want to serve your app from a subdirectory (from example myuser.github.io/myproject ), you will need to add "homepage" field in your package.json , for example:如果您想从子目录（例如myuser.github.io/myproject ）为您的应用程序提供服务，则需要在package.json添加"homepage"字段，例如：
"homepage": "http://myuser.github.io/myproject"
Create React App will infer the correct root path based on the homepage setting . Create React App 将根据homepage设置推断出正确的根路径。 This feature is available since react-scripts@0.2.0此功能从react-scripts@0.2.0开始react-scripts@0.2.0
Please read the deployment instructions for more information.请阅读部署说明以获取更多信息。
解决方案2
0 2020-10-25 15:08:53
I know this is old, but I was having the same problem.我知道这是旧的，但我遇到了同样的问题。 Before I had {"homepage": "./"} and changing it to {"homepage": "/"} in package.json seems to solve my problem.在我拥有{"homepage": "./"}并将其更改为{"homepage": "/"} package.json似乎解决了我的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.