我使用webpack和HtmlWebpackPlugin将捆绑的js和css注入到html模板文件中.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
它会生成以下html文件.
<!doctype html>
<html lang="en">
<head>
...
<link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="main-295c5189923694ec44ac.min.js"></script>
</body>
</html>
这在访问应用程序的根目录时工作正常localhost:3000/,但是当我尝试从另一个URL访问应用程序时失败,例如,localhost:3000/items/1因为捆绑的文件没有注入绝对路径.加载html文件时,它将在不存在的/items目录中查找js文件,因为react-router尚未加载.
如何让HtmlWebpackPlugin注入具有绝对路径的文件,所以express将在我的/dist目录的根目录中查找它们而不是在/dist/items/main-...min.js？或者也许我可以更改我的快速服务器来解决这个问题？
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
基本上,我只需要得到这条线:
<script src="main...js"></script>
在源的开头有一个斜杠.
<script src="/main...js></script>
需要<base href=""/>根据构建环境配置设置标记的href值.
例如:
分期应该有 <base href="/staging" />
产品应该有 <base href="/" />
目前的设置:
构建命令:
"build": "sh -ac '. .env.${REACT_APP_ENV}; react-scripts build'",
"build:staging": "REACT_APP_ENV=staging npm run build",
"build:prod": "REACT_APP_ENV=production npm run build",
.env.staging.js:
REACT_APP_BASE_HREF=/staging
index.html的:
....
<base href="" + process.env.REACT_APP_API_URL />
....
这在index.html中似乎不起作用.虽然类似的设置适用于JS文件
(可能是因为JS文件被解析并捆绑到一个文件中,并且捆绑器在那个时间点读取值)
事情尝试:
index.html的:
<base href=process.env.REACT_APP_API_URL />
<base href="process.env.REACT_APP_API_URL" />
<base href="%process.env.REACT_APP_API_URL%" /> (类似于PUBLIC_URL变量)
设置basename属性以及浏览器路由器也无法解决问题