我有一个nx工作区，里面有几个react应用。其中一个是payment，我想在mybaseurl.com/payment下提供它。静态资产（css，js）无法加载，因为它们仍然指向index.html中的根目录。我似乎无法将PUBLIC_URL更改为"/payment"，以便从mybaseurl.com/payment而不是mybaseurl.com提供所有静态文件。我试过把PUBLIC_URL="mybaseurl.com/payment"和PUBLIC_URL="mybaseurl.com/payment" nx build payment --prod放在.env文件中，但似乎没有任何结果。
如何在构建时更改PUBLIC_URL？
对于引用，使用PUBLIC_URL：https://create-react-app.dev/docs/adding-custom-environment-variables/
示例代码：
当前，生成正在生成以下内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>但我希望构建在index.html中生成以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="/payment/styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="/payment/main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="/payment/runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="/payment/polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="/payment/main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
3条答案
按热度按时间3lxsmp7m1#
最简单的方法是通过编辑
apps/payment/src/index.html来更改base标签：然后浏览器会将这些资源的路径作为前缀。
wyyhbhjk2#
我在project.json的生产配置中设置了“baseHref”属性，然后它出现在生成的index.html
中。
bhmjp9jg3#
如果你想在基本url
mybaseurl.com/payment下提供应用程序，那么在构建过程中你必须传递一个标志base-href，所以构建应用程序的命令是，作为标志的结果，生成的index.html输出将包含，
它会让浏览器在
mybaseurl.com/payment而不是mybaseurl.com上查找您的所有脚本和资源