修改react打包后输出目录以及访问路径

前言

在学习react的过程中，发现在创建好react项目后，没有像vue项目那样的配置文件去提供修改一些打包后的参数，于是在这里分享一下如何去修改一些参数。

• 执行npm run eject命令，把项目的一些底层配置显示出来。
• 修改打包后的输出目录

// config/paths.js  第55行修改  appBuild  参数
module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'), // 打包后的文件夹
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  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'),
  publicUrlOrPath,
};

• 修改打包后项目在服务器上的访问路径，默认是根目录http://localhost:8080/

// package.json文件中增加字段 homepage
{
  "name": "chakra-ui-demo",
  "version": "0.1.0",
  "private": true,
  "homepage": "/chakra/",  // 修改后为  http://localhost:8080/chakra/
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  }
}