react start 後 url 後面不帶/ 解決思路

> [email protected] 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/[email protected]@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/[email protected]@react-dev-utils/WebpackDevServerUtils.js
urls.localUrlForTerminal
printInstructions
createCompiler

\node_modules\[email protected]@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的話
      

解決

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
  },
)