Flutter Web 如何将站点发布和托管到根文件夹以外的位置

Question

目前我正在使用默认应用程序模板测试 flutter web 我创建了一个新项目并使用

构建网络目标

`flutter build web`

将所有文件放在本地服务器的子目录中，这样我就可以从

访问它们

说http://127.0.0.1:43110/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/

但我无法正确加载 flutter 应用程序。

我收到以下错误

Access to XMLHttpRequest at 'http://127.0.0.1:43110/assets/FontManifest.json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Uncaught Failed to load asset at "assets/FontManifest.json" (0)
    at Object.a (http://127.0.0.1:43110/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/main.dart.js:3657:3)
    at http://127.0.0.1:43110/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/main.dart.js:15533:9
    at WK.a (http://127.0.0.1:43110/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/main.dart.js:5208:72)
    at WK.$2 (http://127.0.0.1:43110/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/main.dart.js:26450:23)
    at VZ.$2 (http://127.0.0.1:43110/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/main.dart.js:26445:25)
    at UN.Sx (http://127.0.0.1:43110/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/main.dart.js:27054:42)
    at UN.Sw (http://127.0.0.1:43110/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/main.dart.js:27056:32)
    at fm.Qv (http://127.0.0.1:43110/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/main.dart.js:26578:23)
    at Tl.$0 (http://127.0.0.1:43110/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/main.dart.js:26725:36)
    at Object.n9 (http://127.0.0.1:43110/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/main.dart.js:5324:76)
a @ main.dart.js:3657
$0 @ main.dart.js:27022
aec @ main.dart.js:5356
aen @ main.dart.js:5358
$1 @ main.dart.js:26383
af9 @ main.dart.js:3738
(anonymous) @ main.dart.js:3746
childList (async)
$1 @ main.dart.js:26390
a42 @ main.dart.js:5363
nB @ main.dart.js:5420
lW @ main.dart.js:26656
d1 @ main.dart.js:26573
nb @ main.dart.js:26566
iB @ main.dart.js:26567
(anonymous) @ main.dart.js:3781
$1 @ main.dart.js:29789
af9 @ main.dart.js:3738
(anonymous) @ main.dart.js:3746
error (async)
Ii @ main.dart.js:29019
it @ main.dart.js:29015
uz @ main.dart.js:4897
yO @ main.dart.js:29783
b3 @ main.dart.js:7256
aae @ main.dart.js:7243
(anonymous) @ main.dart.js:15510
(anonymous) @ main.dart.js:5208
$2 @ main.dart.js:26450
a8 @ main.dart.js:5194
Rn @ main.dart.js:15542
ca @ main.dart.js:15504
(anonymous) @ main.dart.js:22768
(anonymous) @ main.dart.js:5208
$2 @ main.dart.js:26450
a8 @ main.dart.js:5194
S9 @ main.dart.js:22802
fe @ main.dart.js:22762
(anonymous) @ main.dart.js:6968
(anonymous) @ main.dart.js:5208
$2 @ main.dart.js:26450
a8 @ main.dart.js:5194
Gl @ main.dart.js:6970
(anonymous) @ main.dart.js:6931
(anonymous) @ main.dart.js:5208
$2 @ main.dart.js:26450
a8 @ main.dart.js:5194
nz @ main.dart.js:6942
afD @ main.dart.js:6919
(anonymous) @ main.dart.js:13935
(anonymous) @ main.dart.js:5208
$2 @ main.dart.js:26450
a8 @ main.dart.js:5194
Xj @ main.dart.js:13946
(anonymous) @ main.dart.js:50140
(anonymous) @ main.dart.js:50134
dartProgram @ main.dart.js:50137
(anonymous) @ main.dart.js:50140
Show 26 more frames
main.dart.js:7244 

GET http://127.0.0.1:43110/assets/FontManifest.json net::ERR_FAILED

Answer 1

更新

<base href="/">

 中的 

web/index.html

标签

就您而言：

<base href="/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/">

Answer 2

你应该在

<base href="/">

上评论这一行

yourProjectDirectory/web/index.html

。之后在终端中运行

flutter build web

，然后将文件夹

yourProjectDirectory/build/web

复制到服务器上所需的任何目录中。 它将在您在浏览器中的地址上工作。

Answer 3

添加一个新答案，因为 flutter cli 似乎有所改进。 现在可以在构建时添加基本 href。

flutter build web --base-href "<your project root>"

例如在这种情况下，它会是

flutter build web --base-href "/1ETE7PzFgfVdJ9YBhoG2uq1g5jwZ6N9Dou/"