react.js - 使用自定义路径运行 npm run build答案

【问题标题】：react.js - running npm run build with custom pathsreact.js - 使用自定义路径运行 npm run build
【发布时间】：2019-01-12 12:36:47
【问题描述】：

在react-create-app 项目上运行npm run build 命令会在所有文件（如地图文件）中创建一个构建文件夹和一些默认路径：

{"version":3,"sources":["../static/js/main.500cb0d9.js" ...

我可以更改构建文件夹中的所有路径以匹配我的 BE，例如

{"version":3,"sources":["mywebsite/web/static/js/main.500cb0d9.js" ...

package.json:

{
  "name": "reactTest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jquery": "^3.3.1",
    "moment": "^2.22.1",
    "react": "^16.4.1",
    "react-datepicker": "^1.5.0",
    "react-dom": "^16.4.1",
    "react-month-picker": "^1.3.7",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

【问题讨论】：

标签： reactjs npm-scripts npm-run react-create-app

【解决方案1】：

您可以使用以下两种方法之一设置根路径，以便在生产环境中为您的 React 应用程序提供服务：

1.通过在 package.json 文件中设置主页属性

注意线 5：

{
  "name": "reactTest",
  "version": "0.1.0",
  "private": true,
  "homepage": "mywebsite/web",
  "dependencies": {
    "jquery": "^3.3.1",
    "moment": "^2.22.1",
    "react": "^16.4.1",
    "react-datepicker": "^1.5.0",
    "react-dom": "^16.4.1",
    "react-month-picker": "^1.3.7",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

(see documentation)

2。使用 PUBLIC_URL 环境变量

运行 build 作业时，在其前面添加 env var，如下所示：

PUBLIC_URL=mywebsite/web npm run build

(see documentation)

它有什么作用？

这些方法不会更改源映射文件中的路径，它们始终是相对的，但它将使您能够将 React 应用程序部署到 Web 服务器带有您选择的绝对路径。

这将导致生成的 index.html 中包含 JavaScript 和 CSS 包的路径是绝对的，根据您设置的值：

<!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="mywebsite/web/manifest.json">
    <link rel="shortcut icon" href="mywebsite/web/favicon.ico">
    <title>React App</title>
    <link href="mywebsite/web/static/css/main.c17080f1.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="mywebsite/web/static/js/main.dbfd0e89.js"></script>
</body>

</html>

【讨论】：

嘿@Patrik，我尝试在我的 package.json 中添加 "homepage": "mywebsite/web" 但我收到 SyntaxError: Unexpected token '
您输入的是“mywebsite/web”吗？这应该是您网站的实际 URL
不。我已经输入了我网站的网址：d。我只是在参考你的例子来解释我的情况。
我仍然会称mywebsite/web/manifest.json为“相对”而不是“绝对”。

【解决方案2】：

查看这个帖子的永久解决方案，我相信这是最好的方便的方法：

https://github.com/facebook/create-react-app/issues/2575#issuecomment-452295290

为了您的方便，我在这里复制粘贴了：

在你的项目根目录创建一个名为 .env 的文件（与 package.json 位于）。在这个文件中写下这个（周围没有引号网址）：

PUBLIC_URL=https://dsomething.cloudfront.net

像往常一样构建你的项目 (npm run build) 这也会生成 index.html 与：

<script type="text/javascript" src="https://dsomething.cloudfront.net/static/js/main.ec7f8972.js">

【讨论】：

【解决方案3】：

随着文档位置的移动，跟进@patrick hund，并且似乎一些步骤发生了变化。您可以在此处阅读并进行相应解释： advanced deployment in CRA.

您可以在此页面中找到大量有用的信息，这些信息可以为您的下一个项目提供各种想法。这是我阅读页面后最喜欢的小技巧：

如果您不使用 HTML5 pushState 历史 API 或根本不使用客户端路由，则无需指定将从哪个 URL 为您的应用程序提供服务。相反，你可以把它放在你的 package.json 中： "homepage": ".", 这将确保所有资产路径都相对于 index.html。然后，您将能够将您的应用从 http://mywebsite.com 移动到 http://mywebsite.com/relativepath 甚至 http://mywebsite.com/relative/path，而无需重新构建它。

【讨论】：