Question

目前我正在使用React和Webpack。我想在不运行＆＃34; npm start＆＃34;的情况下执行React。经过大量的研究后，我发现我可以在不使用＆＃34; npm start＆＃34;只需使用Webpack创建一个＆＃34; bundle.js＆＃34;。

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

我现在想在Apache服务器上测试它。

＆＃34; bundle.js＆＃34;文件在＆＃34; dist＆＃34;中创建以及＆＃34; index.html＆＃34;。当我尝试在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。

Answer 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> 
...

只需要一个额外的点。

Explantion

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

希望有所帮助。

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

1 个答案:

之前

后

Explantion