create-react-app 与节点表达获取％PUBLIC_URL％

JS

使用create-react-app与节点表达获取%PUBLIC_URL%的方法

在创建React应用程序时，我们通常会使用create-react-app脚手架工具。这个工具可以帮助我们快速搭建一个基于React的应用程序，并提供了一些默认的配置和文件结构。

其中一个非常重要的配置是%PUBLIC_URL%，它代表了我们应用程序的公共URL路径。在默认情况下，create-react-app会将%PUBLIC_URL%设置为一个空字符串，这意味着我们的应用程序将从根路径开始。

然而，有时我们可能需要将我们的应用程序部署到子路径下，例如example.com/my-app。这时，我们就需要使用到%PUBLIC_URL%来获取正确的URL路径。

在React应用程序中使用%PUBLIC_URL%的方法很简单。我们可以使用Node.JS的process.env对象来获取到这个值。具体的代码如下所示：

Javascript
const publicUrl = process.env.PUBLIC_URL;

这样，我们就可以在代码中使用publicUrl变量来代表%PUBLIC_URL%。

使用%PUBLIC_URL%的好处是，它可以帮助我们在应用程序中动态地生成正确的URL路径。比如，我们可以将%PUBLIC_URL%与其他路径或文件名拼接以获取到正确的资源路径。这在处理图片、样式表等静态资源时非常有用。

下面是一个使用%PUBLIC_URL%的简单示例：

Javascript
const imageUrl = <code>${publicUrl}/images/logo.png</code>;
const CSSUrl = <code>${publicUrl}/styles/mAIn.CSS</code>;
// 在应用程序中使用imageUrl和CSSUrl

在上面的示例中，我们将publicUrl与图片路径和CSS文件路径拼接以获取到正确的资源URL。这样，无论我们的应用程序部署在哪个子路径下，都能正确地加载资源。

使用%PUBLIC_URL%还可以帮助我们更好地处理路由。比如，我们可以将%PUBLIC_URL%与路由路径拼接以获取到正确的页面URL。这在处理React Router等路由库时非常有用。

：

在使用create-react-app创建React应用程序时，我们可以使用%PUBLIC_URL%来获取应用程序的公共URL路径。这一功能可以帮助我们在应用程序中动态地生成正确的URL路径，包括静态资源路径和页面URL。通过使用Node.JS的process.env对象，我们可以轻松地获取到%PUBLIC_URL%的值，并在代码中使用它。

案例代码：

Javascript
// 获取%PUBLIC_URL%
const publicUrl = process.env.PUBLIC_URL;
// 拼接资源路径
const imageUrl = <code>${publicUrl}/images/logo.png</code>;
const CSSUrl = <code>${publicUrl}/styles/mAIn.CSS</code>;
// 拼接页面URL
const homePageUrl = <code>${publicUrl}/home</code>;
const aboutPageUrl = <code>${publicUrl}/about</code>;
// 在应用程序中使用

通过上述代码示例，我们可以看到如何使用%PUBLIC_URL%来获取资源路径和页面URL，并在应用程序中使用它们。这样，我们可以确保无论应用程序部署在哪个子路径下，都能正确地加载资源和处理路由。