What should I do if the react build path is incorrect?

Solution to incorrect react build path: 1. Find "node_modules -> react-scripts -> config -> paths.js"; 2. Modify the content to "envPublicUrl || (publicUrl ? url .parse(publicUrl).pathname : './');"; 3. Recompile and package.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What should I do if the path to react build is incorrect?

The resource file path is incorrect or a blank page opens after the React project is built, and the problem and simple solution

Find node_modules -> react-scripts -> config -> paths .js

Modify

function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');//改成'./'
  return ensureSlash(servedUrl, true);
}

to

function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
  return ensureSlash(servedUrl, true);
}

and then recompile and package it

Or an easier way is to add in your package.json: The following

“homepage”: “.”,

This will ensure that all asset paths are relative to index.html

so the application moves from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path does not need to be rebuilt.

If you are not using the HTML5 pushState history API or are not using client routing at all, you do not need to specify the URL of your application.

If the resource path is still wrong, the recat framework may use BrowserRouter routing, which will cause the browser to not be able to access the corresponding routing configuration. This routing is a bit problematic. You can replace the HashRouter to solve the problem of blank or incorrect resource paths.

Recommended learning: "react video tutorial"

The above is the detailed content of What should I do if the react build path is incorrect?. For more information, please follow other related articles on the PHP Chinese website!