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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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

以上是 react start 后 url 后面不带/ 解决思路 的全部内容， 来源链接： utcz.com/z/382555.html

回到顶部