在react项目中修改webpack中本地服务器架设的目录_react项目中public文件路径可以更改吗

一个产品的上线往往会有很多的问题，现在就出现一个需求，我们是在服务器下的某个目录进行发布，而不是根服务器，服务端不想为一个项目配置ip地址，而在react项目中,默认是走的根路径，现在我们就开始修改一下它。

前提说明

如果我们需要修改手动配置webpack, 那么根据现在的版本, 我们只能执行 npm run eject, 之后就可以着手修改了。

webpack中与需求相关的关键代码

我们找到config目录下的paths.js , 在此处定义了我们需要的所有配置，
通过阅读以下代码：

// We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served.
// Webpack needs to know it to put the right <script> hrefs into HTML even in
// single-page apps that may serve index.html for nested URLs like /todos/42.
// We can't use a relative path in HTML because we don't want to load something
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
  return ensureSlash(servedUrl, true);
}
1
2
3
4
5
6
7
8
9
10
11
12

通过注释提示：We use `PUBLIC_URL` environment variable or "homepage" field to infer "public path" at which the app is served. 可知，我们需要配置PUBLIC_URL的环境变量,或者homepage的字段来配置服务器发布的目录，由于环境变量的配置不是太友好，所以我们选择使用homepage field的方式来处理, 再次阅读代码：

const getPublicUrl = appPackageJson =>
  envPublicUrl || require(appPackageJson).homepage;
1
2

module.exports = {
  dotenv: resolveApp('.env'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

可知：程序读取项目中的package.json文件来获取homepage字段的，所以，我们只需要在package.json文件中配置homepage字段就可以了，如下：

package.json文件，添加配置：

"homepage": "/yourdir",
1

之后项目就可以发布在了yourdir目录下了。

注意事项

在这种配置下，我们的路由系统需要修改下，因为路由是访问的规则，我们如果在某一域名下访问这个目录，那么我们的路由需要特殊处理，如果使用react-router或react-router-dom 中的 BrowserRouter 组件，那么路由就会很混乱，所以 更好的选择 是直接使用 HashRouter 组件。