React：如何将启动文件 index.html 更改为 manifest.json 的 start_url 中的其他 html 页面

Question

在 React 中，我需要将起始页面 index.html 更改为其他 html 页面（例如：person.html 作为说明页面）。我在公用文件夹中创建了 person.html 页面并在 manifest.json 中进行了更改并尝试了。但它仍然以 index.html 为优先。

manifest.json：

{

  "short_name": "React App",

  "name": "Create React App Sample",

  "icons": [

    {

      "src": "favicon.ico",

      "sizes": "64x64 32x32 24x24 16x16",

      "type": "image/x-icon"

    }

  ],

  "start_url": "./person.html", //here i have changed and tried

  "display": "standalone",

  "theme_color": "#000000",

  "background_color": "#ffffff"

}

我期待渲染时的结果，它不应该运行 index.html 并且应该占用其他 html 页面。

Answer 1

假设您使用 create-react-app 创建 react 应用程序，您需要弹出项目才能重命名它。一旦项目被弹出，您可以手动配置 webpack、babel 和所有其他依赖项。您需要深入研究 webpack 设置来更改它。

不弹出就没有其他办法。请小心，因为您无法撤消它。

首先你需要运行：

npm run eject

在 webpack.config.prod.js 中将文件名更改为：

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

您可以在这里阅读更多内容：https://github.com/facebook/create-react-app/issues/1761

编辑：

看起来 webpack 配置在较新的 create-react-app 版本中发生了变化。下面是你现在的做法：

第一次弹出。 然后打开 config 文件夹中的 paths.js，并更改 module.exports 中的 appHtml 属性。

这是修改后的导出对象：

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/person.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')),
};