与众不同的Create-React-App：自定义Build/Static前缀

2023-11-20 20:39:16

好的，以下是您的文章：

在软件开发的旅程中，我们经常会遇到各种各样的挑战。近日，我便在使用Create-React-App创建一个新项目时，遇到了一个比较棘手的难题。由于后端已经占用了/static路由，因此我需要更改默认的/static文件夹名称。这听起来似乎很简单，但实际上却需要对Create-React-App的构建配置进行一番调整。

带着这样的疑问，我开始了探索之旅。通过查阅相关资料，并结合自己的实践经验，我总结了一套行之有效的方法，可以帮助您轻松更改Create-React-App的build/static前缀。

首先，让我们先来了解一下Create-React-App的默认构建配置。在项目根目录下，有一个名为package.json的文件。在这个文件中，您可以找到项目构建的相关配置。其中，有一行代码是：

"homepage": "https://my-app.com/",

这一行代码指定了应用程序的根路径，即在部署应用程序时，所有静态资源将被放置在该路径下。在默认情况下，这个路径是“/static”。如果您的后端已经占用了这个路径，那么您需要更改它。

要更改这个路径，您需要在package.json文件中添加一行新的代码：

"homepage": "https://my-app.com/public/",

这里，我们将根路径更改为“/public”。这将导致所有静态资源在部署时被放置在“/public”目录下。

接下来，我们需要修改webpack的配置。webpack是一个打包工具，它负责将应用程序的源代码打包成可以在浏览器中运行的代码。在项目根目录下，有一个名为“webpack.config.js”的文件。在这个文件中，您可以找到webpack的配置。

我们需要在webpack的配置中添加一行新的代码：

output: {
  path: path.resolve(__dirname, 'build/public'),
  filename: '[name].js',
},

这里，我们将输出路径更改为“build/public”。这将导致webpack将打包后的代码放在“build/public”目录下。

最后，我们需要修改React应用程序的配置。在项目根目录下，有一个名为“index.js”的文件。在这个文件中，您可以找到React应用程序的配置。

我们需要在React应用程序的配置中添加一行新的代码：

import { basename } from 'path';
import { useRoutes } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory({
  basename: process.env.PUBLIC_URL || '/',
});

export default function App() {
  return (
    <Router history={history}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}