如何在创建反应应用程序项目中重命名索引.html?

Question

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

Answer 1

正如相关的CRA问题1761所建议的那样，建议的解决方案是弹出整个配置(包括Webpack(：

npm run eject

运行 npm run eject 会将所有配置文件和传递依赖项(Webpack、Babel、ESLint 等(直接复制到您的项目中，以便您可以完全控制它们。像 npm start 和 npm run build 这样的命令仍然有效，但它们将指向复制的脚本，以便您可以调整它们。在这一点上，你只能靠自己了。(为什么我喜欢创建反应应用程序(

弹出后，您将能够在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

更新了答案

对于较新的创建反应应用程序版本，看起来配置发生了一些变化。

首先，您需要弹出：

npm run eject

然后打开路径.js该路径位于 config 文件夹中，并更改 module.exports 中的 appHtml 属性。这是您需要进行的唯一更改。

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

module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: resolveApp('build'),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/mynewawesomeindexfile.html'),  //Change only this line
appIndexJs: resolveModule(resolveApp, 'src/index'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
appJsConfig: resolveApp('jsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
};

Answer 3

我想更新线程，因为我弄清楚了这一点。改变

appHtml: resolveApp('public/mynewawesomeindexfile.html'),  //Change only this line

仅影响它在编译期间获取文件的方式。为了让npm start开心，我保持原样(包括公开的文件名(。但是，您可以在 webpack.config 中更改构建的 html 文件的文件名.js在第 #565 行附近：

plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
filename: isEnvProduction ? 'mynewawesomeindexfile.html' : 'index.html'
...

我可以确认，执行此操作后，我的构建文件夹包含该文件名而不是 index.html。我希望这在找到此线程时对其他人有所帮助:)