React Builder 工具不会正确设置公共 url答案

【问题标题】：React Builder tool won't set public url correctlyReact Builder 工具不会正确设置公共 url
【发布时间】：2017-06-11 08:37:33
【问题描述】：

我正在尝试使用 react 的构建工具构建我的 react 应用程序。

npm run build

但是当我打开 build 文件夹中的 index.html 文件时，除了空白页，我什么都看不到。那是因为 react builder 设置了脚本和 css 路径错误。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<style>
</style>
<link href="/static/css/main.5fa823c3.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.09bdcb2b.js"></script>
</body>
</html>

如您所见，每个文件路径前都有斜线。如果我手动修复此问题，则脚本可以工作，但浏览器找不到“service-worker.js”文件，因为 process.env.PUBLIC_URL 的值为 null。（service-worker.js 存在于正确的位置）

export default function register() {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      console.log("URL: "+process.env.PUBLIC_URL) //THIS IS NULL
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
      navigator.serviceWorker
        .register(swUrl)
        .then(registration => {
          registration.onupdatefound = () => {
            const installingWorker = registration.installing;
            installingWorker.onstatechange = () => {
              if (installingWorker.state === 'installed') {
                if (navigator.serviceWorker.controller) {
                  // At this point, the old content will have been purged and
                  // the fresh content will have been added to the cache.
                  // It's the perfect time to display a "New content is
                  // available; please refresh." message in your web app.
                  console.log('New content is available; please refresh.');
                } else {
                  // At this point, everything has been precached.
                  // It's the perfect time to display a
                  // "Content is cached for offline use." message.
                  console.log('Content is cached for offline use.');
                }
              }
            };
          };
        })
        .catch(error => {
          console.error('Error during service worker registration:', error);
        });
    });
  }
}

export function unregister() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(registration => {
      registration.unregister();
    });
  }
}

基本上是不能设置public url的。

我该如何解决这个问题？几乎没有关于这个问题的任何信息。

【问题讨论】：

您指的是哪个构建工具？你是说 CreateReactApp 的脚本吗？如果没有，如果您想比较一些东西，构建确实可以开箱即用。

标签： reactjs npm

【解决方案1】：

您必须在您的 package.json 文件中设置您的“主页”。假设您的项目位于服务器工作目录根目录下名为“project”的文件夹中。

{
  "name": "app name",
  "homepage": "/project",
}

【讨论】：