首先，在你的 React 项目中，转到你的package.json并调整这行代码以匹配你的目标域地址 + 文件夹：

"homepage": "https://yourwebsite.com/your_folder_name/",

其次，转到您的react项目中的终端并键入：

npm run build

现在，从新创建的构建文件夹中取出所有文件并将它们上传到 your_folder_name，在子文件夹中使用 filezilla ，如下所示：

public_html/your_folder_name

在浏览器中查看！

最终能够弄清楚，我只希望它可以帮助像我这样的人。
以下是 webpack 配置文件的外观检查指定的 dist 目录和输出文件。我错过了指定 dist 目录路径的方法

const webpack = require('webpack');
const path = require('path');
var config = {
    entry: './main.js',

    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index.js',
    },

    devServer: {
        inline: true,
        port: 8080
    },
    resolveLoader: {
        modules: [path.join(__dirname, 'node_modules')]
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
}

module.exports = config;

然后打包json文件

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --progress",
    "production": "webpack -p --progress"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "express": "^4.13.3",
    "webpack": "^1.9.6",
    "webpack-devserver": "0.0.6"
  }
}

注意脚本部分和生产部分，生产部分为您提供最终可部署的 index.js 文件（名称可以是任何内容）

事情的休息将取决于您的代码和组件

执行以下命令序列

安装

这应该为您提供所有依赖项（节点module）

然后

npm 运行生产

这应该会为您提供index.js包含所有捆绑代码的最终文件

完成后index.html，index.js在 www/html 或 web 应用程序根目录下放置和文件，仅此而已。

1. 转到您的项目根目录，例如：cd /home/ubuntu/react-js.
2. 首先构建您的项目：npm run build.
3. 检查您的构建目录，构建文件夹中将提供以下所有文件：

   asset-manifest.json
   favicon.ico
   manifest.json
   robots.txt
   static 
   assets
   index.html
   precache-manifest.ddafca92870314adfea99542e1331500.js 
   service-worker.js 

4. 将 build 文件夹复制到您的 apache 服务器，即/var/www/html：

   sudo cp -rf build /var/www/html

5. 转到站点可用目录：

   cd /etc/apache2/sites-available/

6. 打开000-default.conf文件：

sudo vi 000-default.conf并将 DocumentRoot 路径更改为/var/www/html/build.

7. 现在转到 Apache 配置。

cd /etc/apache2

sudo vi apache2.conf

添加以下代码段：

<Directory /var/www/html>

       Options Indexes FollowSymLinks

       AllowOverride All

       Require all granted

</Directory>

8. 在里面创建一个文件/var/www/html/build：

   sudo vi .htaccess

Options -MultiViews
    
RewriteEngine On
    
RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^ index.html [QSA,L]

9. 重启 Apache 服务器：

   sudo service apache2 restart

在进行 npm 构建之前，
1) 转到您的 React 项目根文件夹并打开package.json.
2) 添加“主页”属性到package.json

• 如果你想提供绝对路径

  "homepage": "http://hostName.com/appLocation",
  "name": "react-app",
  "version": "1.1.0",
  

• 如果你想提供相对路径

  "homepage": "./",
  "name": "react-app",
  

  使用相对路径方法可能会在您的 IDE 中警告语法验证错误。但是在编译期间构建没有任何错误。

3) 保存package.json, 并在终端运行npm run-script build
4) 将build/文件夹的内容复制到您的服务器目录。

PS：如果您想经常更改服务器中的构建文件位置，使用相对路径方法很容易。

正如帖子中所说，React 是一种基于浏览器的技术。它仅呈现 HTML 文档中的视图。

为了能够访问您的“React App”，您需要：

1. 将你的 React 应用打包成一个包
2. 让 Apache 指向您服务器中的 html 文件，并允许外部访问。

您可能在此处拥有所有信息：https : //httpd.apache.org/docs/trunk/getting-started.html用于 Apache 服务器，并在此处制作您的 javascript 包https://www.codementor.io/tamizhvendan /beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr