创建 React 应用程序 - npm 运行构建问题

Question

我正在使用 create-react-app 构建应用程序，当我运行 npm 运行 build 时，它会创建一个构建文件夹，其中包含预期的静态文件夹。

build--> static

但是当我在构建文件夹中看到 index.html 文件时，资产的路径是 /static 而不是 /build/static 这就是页面无法正确加载的原因缺少资产 .

我可以做任何配置设置来解决这个问题吗？

Answer 1

您似乎在尝试使用未导入的资产。

我更喜欢创建一个资产文件夹并将这些文件放在这里，然后 import/use 相应地放置它们。

来自the documentation：

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

如果你真的想使用public文件夹，你可以use the PUBLIC_URL variable.

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

Answer 2

But when I see the index.html file inside the build folder, the path to assets is /static and not /build/static

此行为是预期的。

您应该部署 build 文件夹并从中提供应用程序。由于 index.html 在 build 内，它将为 / 提供服务，build/static/* 中的文件将为 /static/*.

提供服务

有关这方面的更具体说明，请阅读用户指南的 Deployment section。

Answer 3

如果您只想运行您的应用程序，您只需运行命令：npm start

但是，如果您真的想为静态引用添加前缀以将您的代码上传到特定的子目录，您应该在 package.json 上添加您想要在 create-react-app 上使用的主页。

因此，如果您希望您的 React 应用程序在每个引用的开头使用 /build，您应该将以下行添加到您的 package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "/build",  
  ...
}

当您在配置中生成没有主页的构建时，会显示以下消息：

The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build```

创建 React 应用程序 - npm 运行构建问题

create react app - npm run build issues

ecmascript-6

reactjs

redux

create-react-app

创建 React 应用程序 - npm 运行 构建问题

create react app - npm run build issues

ecmascript-6

reactjs

redux

create-react-app

创建 React 应用程序 - npm 运行构建问题