我正在使用 Surge 来托管我的 create-react-app 网站,为了使用客户端路由,您需要使用入口点,200.html
但是在使用 create-react-app 时,它默认设置为index.html
. 在不破坏网站的情况下重命名该文件的最佳方法是什么?
如何在 create-react-app 项目中重命名 index.html?
IT技术
javascript
reactjs
react-router
surge.sh
2021-05-14 13:22:08
2个回答
正如相关的CRA 问题 1761 中所建议的,建议的解决方案是弹出整个配置(包括 Webpack):
npm run eject
运行 npm run eject 会将所有配置文件和可传递依赖项(Webpack、Babel、ESLint 等)复制到您的项目中,以便您可以完全控制它们。npm start 和 npm run build 等命令仍然有效,但它们将指向复制的脚本,以便您可以调整它们。在这一点上,你是靠自己的。(为什么我喜欢 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
处理后进行简单的重命名就足够了。
更新答案
对于较新的 create-react-app 版本,看起来配置有所改变。
首先,您需要弹出:
npm run eject
然后打开config文件夹中的paths.js,修改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')),
};
其它你可能感兴趣的问题