如何在 Apache 中运行我的 React 应用程序？答案

【问题标题】：How to run my React app in Apache?如何在 Apache 中运行我的 React 应用程序？
【发布时间】：2018-09-09 04:46:49
【问题描述】：

目前我正在使用带有 Webpack 的 React。我想在不运行“npm start”的情况下执行 React。所以经过大量研究后，我发现我可以在生产环境中运行，而无需使用“npm start”，只需使用 Webpack 创建一个“bundle.js”。

到目前为止，我已经创建了我的“bundle.js”，它在我的节点服务器上运行良好。

我现在想在 Apache 服务器中进行测试。

“bundle.js”文件与“index.html”一起在“dist”中创建。当我尝试在 Apache 服务器中运行时，它不包含 React 代码。

所以我的问题是：如何在 Apache 中运行我的 React 应用程序？

这是我的 webpack-config.js

 const path = require("path");
 const HtmlWebPackPlugin = require("html-webpack-plugin");
 module.exports = {
  entry: ["./src/js/root.js"],
  output: {
    path: path.resolve(__dirname, "/dist"),
    filename: "js/main.js"
  },
 devServer: {
  contentBase: "./dist"
 },
 module: {
 rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader"
    }
  },
  {
    test: /\.html$/,
    use: [
      {
        loader: "html-loader"
      }
    ]
  }
  ]
 },
 plugins: [
   new HtmlWebPackPlugin({
   template: "./src/index.html",
   filename: "./index.html"
 })
]
};

我的 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" 
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- 
  beta.2/css/bootstrap.min.css" >
  <title>How to set up React, Webpack, and Babel</title>
</head>
<body>
 <div class="container">
    <div class="row mt-5">
        <div class="col-md-4 offset-md-1">
            <p>Create a new article</p>
            <div id="root-container">
                <!-- form -->
            </div>
        </div>
    </div>
  </div>
 <script src="../dist/js/main.js"></script>
</body>
</html>

在我的 dist 文件夹中，它创建了 2 个文件， index.html 和 main.js。

【问题讨论】：

您将 index.html 文件放在哪里？它有 bundle.js 引用吗？
您是否使用create-react-app 创建反应应用程序？还是使用自定义设置您自己的 webpack？
如果我们看到代码，它将帮助我们更轻松地帮助您。但只是在黑暗中拍摄，请检查index.html 中的<script src='bundle.js'></script> 路径
我使用了自定义设置。我没有使用 create-react-app。
我现在将更新我的代码

标签： apache reactjs webpack bundle

【解决方案1】：

我之前遇到过你的问题，我尝试在 Apache 上托管编译后的 React 代码，但是脚本似乎没有正确加载，所以我在 index.html 中进行了一些更改以使用 relative path 而不是 absolute path .

查看this article 以了解有关路径的更多信息。

之前

...
<script type="text/javascript" src="/static/js/main.f73baec9.js"></script> 
...

之后

...
<script type="text/javascript" src="./static/js/main.f73baec9.js"></script> 
...

只需一个额外的点即可。

解释

如果您将其托管在 Apache 上，并且您没有使用相对路径，则服务器将尝试在服务器根目录中查找您的脚本。因此，除非您将编译后的 React 代码直接托管在服务器根目录中，否则您将需要使用相对路径。

希望对您有所帮助。

【讨论】：

我只收录了这样的。当我运行此服务器时，我可以看到包含文件，但是它不仅显示 html 内容而不显示反应代码。
我只收录了这样的。当我运行此服务器时，我可以看到包含文件，但是它只显示 html 内容而不是反应代码。
对不起，我无法理解您的情况。