React/Webpack:如果生产构建在别名路径下运行，如何转换相对资源URL

Question

我已经使用Create React app安装了一个应用程序，该应用程序需要部署到生产服务器上，在该服务器上，应用程序通过别名路径运行，即

http://server.com/alias/

而不是

http://server.com

我也在使用Redux版本的React Router。我的问题是图像URL没有正确翻译。如果我使用绝对路径，将找不到图像，因为服务器会在根目录下查找它们。如果我使用相对路径，如果React Router修改URL以指向比/alias更深的位置，例如/alias/search，则不会找到图像。

在为Create React App做了一次"弹出"后，我看到我可以使用package.json设置一个"主页"路径。这解决了Webpack在主索引页中包含JavaScript和CSS文件时必须正确设置别名的问题。

但这个选项不会告诉React将别名应用于链接所包含的资源。有没有任何插件可以告诉React在不必在React代码中硬编码的情况下，将我的别名预先添加到所有链接？

此外，我还找不到一个选项来告诉React Router，它也应该为所有链接使用别名。目前，我正在把它们硬编码在路线上。这很好，钻头也是次优的。

Answer 1

为生产构建时，在输出属性下设置publicpath选项

module.exports = { 
//....
output : {
publicPath: "/alias/"
}
// additional configuration
};