react.js - 运行ning npm 运行使用自定义路径构建

Question

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

{"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"
  }
}

Answer 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 作业时，在它之前添加环境变量，如下所示：

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>

Answer 2

Check the permanent solution of this post, I believe this is the best convenient method:

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

For your convenience, I have copied and pasted here:

Create a file called .env at your project root(same place where package.json is located). In this file write this(no quotes around the url):

PUBLIC_URL=https://dsomething.cloudfront.net

Build your project as usual (npm run build) This will also generate index.html with:

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

Answer 3

跟进@patrick hund，因为文档位置已移动，并且似乎某些步骤已更改。你可以在这里阅读并相应地解释： advanced deployment in CRA.

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

If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json: "homepage": ".", This will make sure that all the asset paths are relative to index.html. You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.

react.js - 运行ning npm 运行使用自定义路径构建

react.js - running npm run build with custom paths

reactjs

npm-run

npm-scripts

react-create-app

react.js - 运行ning npm 运行 使用自定义路径构建

react.js - running npm run build with custom paths

reactjs

npm-run

npm-scripts

react-create-app

react.js - 运行ning npm 运行使用自定义路径构建