react start 后 url 后面不带/ 解决思路

> navigator@0.1.0 dev H:\2020home\giteez\navigator
> node scripts/start.js

Compiled successfully!

You can now view navigator in the browser.

  http://localhost:3009

Note that the development build is not optimized.
To create a production build, use yarn build.

node_modules/_react-dev-utils@10.2.1@react-dev-utils/WebpackDevServerUtils.js

function printInstructions(appName, urls, useYarn) {
  console.log();
  console.log(`You can now view ${chalk.bold(appName)} in the browser.`);
  console.log();

  if (urls.lanUrlForTerminal) {
    console.log(
      `  ${chalk.bold('Local:')}            ${urls.localUrlForTerminal}`
    );
    console.log(
      `  ${chalk.bold('On Your Network:')}  ${urls.lanUrlForTerminal}`
    );
  } else {
    console.log(`  ${urls.localUrlForTerminal}`);
  }

  console.log();
  console.log('Note that the development build is not optimized.');
  console.log(
    `To create a production build, use ` +
      `${chalk.cyan(`${useYarn ? 'yarn' : 'npm run'} build`)}.`
  );
  console.log();
}

查询

node_modules/_react-dev-utils@10.2.1@react-dev-utils/WebpackDevServerUtils.js
urls.localUrlForTerminal
printInstructions
createCompiler

\node_modules\_react-scripts@3.4.4@react-scripts\scripts\start.js
prepareUrls

react-dev-utils/WebpackDevServerUtils
const localUrlForTerminal = prettyPrintUrl(prettyHost);

const urls = prepareUrls(
      protocol,
      HOST,
      port,
      paths.publicUrlOrPath.slice(0, -1)
    );

最后重点就是 paths.publicUrlOrPath.slice(0, -1)
'/web/'.slice(0, -1)
'/web'
所以。我么需要后面多加一个字符就ok了

也就是在 config-overrides.js 里面 paths.publicUrlOrPath = subPath，这里用的是 react-app-rewired

后记-
改成'/web//'系统就加载不了文件，系统就崩了。再想其他方法。不eject的话

解决

最后解决了，思路就是 开发时候就是根目录，打包的时候，带上子目录

刚才进行了eject，然后那堆报错，还要把 react-app-rewired 打补丁的配置 从写一遍。最后换了一个解决思路

config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra')

// process.env.PUBLIC_URL = '/oss-front';
// 关闭 sourceMap
process.env.GENERATE_SOURCEMAP = 'true'
// process.env.GENERATE_SOURCEMAP = 'false';
// const path = require('path')

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#574ab7' },
  }),
  (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 暴露webpack的配置 config ,evn
      const paths = require('react-scripts/config/paths')
      // 配置访问子目录/web/
      // paths.appBuild = path.join(path.dirname(paths.appBuild), 'oss')
      // config.output.path = paths.appBuild
      const subPath = '/oss-web/'
      paths.publicUrlOrPath = subPath
      config.output.publicPath = subPath
    }
    return config
  },
)