preface

The reason is as follows: IN a project built with create-react-app, I set the file of homepage and the file of PUBLIC_URL at the same time, which caused a series of exceptions.

scenes

At that time, the project needed to be configured to a subdirectory/Visual-drag-demo, so I made the following operations for homepage and package.json configuration as follows:

"homepage": "/visual-drag-demo",
Copy the code

After the packaged build runs, I open the console to look at the path and discover that it is not correct to access the directory after compilation.

<script src="/static/js/main.e8bd816f.chunk.js"></script>
Copy the code

After investigation, I found package.json and made the following configuration before:

"start": "PUBLIC_URL=/ react-app-rewired start",
Copy the code

After PUBLIC_URL=/ is set, PUBLIC_URL has a higher priority than homepage. The compilation path is /. That’s why it’s so wrong.

Ask why again

Http://image.tingclass.net/show.php/show.php/show.php/show.php/show.php/show.php/show.php/show.php/show.php/show.php/ Unconvinced, I went to create-React-app to find the answer. In getPublicUrlorPath.js, I see this logic running. The code is as follows:

/**
 * Returns a URL or a path with slash at the end
 * In production can be URL, abolute path, relative path
 * In development always will be an absolute path
 * In development can use `path` module functions for operations
 *
 * @param {boolean} isEnvDevelopment
 * @param {(string|undefined)} homepage a valid url or pathname
 * @param {(string|undefined)} envPublicUrl a valid url or pathname
 * @returns {string}* /
function getPublicUrlOrPath(isEnvDevelopment, homepage, envPublicUrl) {
  const stubDomain = 'https://create-react-app.dev';

  if (envPublicUrl) {
    // ensure last slash exists
    envPublicUrl = envPublicUrl.endsWith('/')? envPublicUrl : envPublicUrl +'/';

    // validate if `envPublicUrl` is a URL or path like
    // `stubDomain` is ignored if `envPublicUrl` contains a domain
    const validPublicUrl = new URL(envPublicUrl, stubDomain);

    return isEnvDevelopment
      ? envPublicUrl.startsWith('. ')?'/'
        : validPublicUrl.pathname
      : // Some apps do not use client-side routing with pushState.
        // For these, "homepage" can be set to "." to enable relative asset paths.
        envPublicUrl;
  }

  if (homepage) {
    // strip last slash if exists
    homepage = homepage.endsWith('/')? homepage : homepage +'/';

    // validate if `homepage` is a URL or path like and use just pathname
    const validHomepagePathname = new URL(homepage, stubDomain).pathname;
    return isEnvDevelopment
      ? homepage.startsWith('. ')?'/'
        : validHomepagePathname
      : // Some apps do not use client-side routing with pushState.
      // For these, "homepage" can be set to "." to enable relative asset paths.
      homepage.startsWith('. ')? homepage : validHomepagePathname; }return '/';
}
Copy the code

In the code above, you will find all the answers to your questions.