构建后在 index.html 中获取公共 URL答案

【问题标题】：Get public URL in index.html after build构建后在 index.html 中获取公共 URL
【发布时间】：2019-12-06 12:26:35
【问题描述】：

我有一个使用命令 npx create-react-app my-app 创建的 reactjs 应用程序，我使用 yarn build 构建我的项目

json 包：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

一旦我构建了应用程序 index.html 如下所示（它具有所有静态文件的绝对路径），

<script type="text/javascript" src="/static/js/main.af2bdfd5.js"></script>
<link href="/static/css/main.097da2df.css" rel="stylesheet">
<link rel="shortcut icon" href="/favicon.ico">

我希望这些来源如下所示（需要提供公共 URL）

<script type="text/javascript" src="http://localhost:3000/static/js/main.af2bdfd5.js"></script>
<link href="http://localhost:3000/static/css/main.097da2df.css" rel="stylesheet">
<link rel="shortcut icon" href="http://localhost:3000/favicon.ico">

我尝试将 PUBLIC_URL 和 homepage 添加到 package.json 中，但没有成功。

【问题讨论】：

标签： javascript reactjs npm deployment build

【解决方案1】：

只需在链接的 href 中使用 %PUBLIC_URL%，它只会在公共文件夹中存在这些文件时获取文件。

将您的文件放在public 文件夹中，并假设该文件是您要访问的图标，其名称为icon.ico

<link rel="shortcut icon" href="%PUBLIC_URL%/icon.ico">

您不需要为您的文件输入绝对网址，只需在 index.html 中使用%PUBLIC_URL%。

注意：您无需将 PUBLIC_URL 添加到 package.json。它已分配到公用文件夹。

【讨论】：

<link rel="shortcut icon" href="%PUBLIC_URL%/icon.ico"> 已经存在，但是一旦我构建了%PUBLIC_URL% 的值，就不会添加到静态文件夹中。
我认为您可以创建一个新的.env 文件并分配一个变量APP_LINK = http://localhost:3000。那会起作用的。
还尝试将.env 文件添加到package.json 的位置。分配了一个变量 PUBLIC_URL=localhost:3000。它没有工作
是公共目录中的“静态”目录吗？我问这个是因为public 目录被分配给`localhost:3000'，如果您尝试访问公用文件夹中的子目录，那么只有这样才有可能，否则您将无法访问应用程序中的其他目录。
你可以最后一次尝试 -> href="%REACT_APP_TEST_URL1%/icon.ico" 。并且您可以在运行应用程序时传递环境变量REACT_APP_TEST_URL1=http://localhost:3000 npm start

【解决方案2】：

找到了解决办法，

我使用dotenv 设置环境变量。下面给出了实施该解决方案的步骤。

1) 安装dotenv 包。

npm i dotenv

2) 尽早在应用中，require和配置dotenv。

require('dotenv').config()

3) 在项目根目录下创建.env文件。以NAME=VALUE 的形式在新行中添加特定于环境的变量。

PUBLIC_URL=http://192.168.8.100:3000

【讨论】：