当我访问根网址时，一切正常。脚本、favicon 和 css 文件按照以下网址的请求正确加载。
http://localhost:5000/xxxx.ext
例如-http://localhost:5000/styles.e6300255543f91ea72dc.css
但是当我访问组件路由时
http://localhost:5000/technical/create
直接从错误的网址请求这些文件
http://localhost:5000/technical/xxxx.ext
例如-http://localhost:5000/technical/styles.e6300255543f91ea72dc.css
因为该资源无法访问。
这是我由 angular 生成的index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgKiteAutotrader</title>
<base href="./"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.e6300255543f91ea72dc.css"></head>
<body>
<app-root></app-root>
<script src="runtime-es2015.c5fa8325f89fc516600b.js" type="module"></script>
<script src="runtime-es5.c5fa8325f89fc516600b.js" nomodule defer>
</script><script src="polyfills-es5.3e8196928d184a6e5319.js" nomodule defer></script>
<script src="polyfills-es2015.5b10b8fd823b6392f1fd.js" type="module"></script>
<script src="vendor-es2015.fa47820e09ac01cec997.js" type="module"></script>
<script src="vendor-es5.fa47820e09ac01cec997.js" nomodule defer></script>
<script src="main-es2015.a9ff96b7236696638d6a.js" type="module"></script>
<script src="main-es5.a9ff96b7236696638d6a.js" nomodule defer></script></body>
</html>
用于构建项目的命令是
ng build --prod --base-href ./ --aot --vendor-chunk --common-chunk --delete-output-path --build-optimizer && tar -zcvf archive.tar.gz dist/*
问题仅发生在 firebase 中。
firebase.json
{
"hosting": {
"public": "dist",
"rewrites":[{
"source": "/api/:path*",
"destination": "https://xxxxx.herokuapp.com/api/:path"
}, {
"source": "**",
"destination": "/index.html"
}],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"emulators": {
"hosting": {
"port": 5000
},
"pubsub": {
"port": 8085
},
"ui": {
"enabled": true
}
}
}
这可以通过更改构建命令来解决
ng build --prod --base-href ./
到
ng build --prod --base-href /
如果它仍然不适合你，那么你可以添加根（基）网址而不是正斜杠