Question

我正在使用Surge来托管我的create-react-app网站，为了使用客户端路由，你需要你的入口点是200.html但是当使用create-react-app时它是默认设置为index.html。在不破坏网站的情况下重命名该文件的最佳方法是什么？

Answer 1

根据相关CRA issue 1761的建议，建议的解决方案是弹出整个配置（包括Webpack）：

npm run eject

运行npm run eject会将所有配置文件和传递依赖项（Webpack，Babel，ESLint等）复制到项目中，以便您可以完全控制它们。像npm start和npm run build这样的命令仍然有效，但它们会指向复制的脚本，以便您可以调整它们。在这一点上，你是独立的。 (Why I love Create React App)

弹出后，您可以手动编辑config/webpack.*.js内的配置。

您可能会期望有这样的行：

new HtmlWebpackPlugin({ inject: true, template: paths.appHtml, filename: 'index.html', ...)

您只需将index.html替换为所需的200.html。

还可以使用构建命令（如建议的lcoder）：

{
  "scripts": {
    ...
    "build": "node scripts/build.js && mv build/index.html build/app.html",
    ...
  }
}

假设build进程之后的简单重命名就足够了。

Answer 2

更新的答案

对于较新的create-react-app版本，配置似乎有所更改。

首先，您需要弹出：

JENKINS_JAVA_OPTIONS

然后打开在config文件夹中找到的path.js，并在module.exports中更改appHtml属性。这是您唯一需要进行的更改。

以下是修改后的导出对象的示例：

npm run eject

如何在create-react-app项目中重命名index.html？

2 个答案:

更新的答案