如何在本地浏览器中打开编译好的Flutter web index.html？

Question

运行时flutter build web会创建index.html文件/build/web/

\n

assets                    icons                     manifest.json\nfavicon.png               index.html                version.json\nflutter_service_worker.js main.dart.js\n

\n

当前的 flutter 通道是 beta 版。

\n

$ flutter channel

\n

Flutter channels:  \n  master  \n  dev  \n* beta  \n  stable\n

\n

flutter --version

\n

Flutter 1.25.0-8.1.pre \xe2\x80\xa2 channel beta \xe2\x80\xa2 https://github.com/flutter/flutter.git\nFramework \xe2\x80\xa2 revision 8f89f6505b (2 weeks ago) \xe2\x80\xa2 2020-12-15 15:07:52 -0800\nEngine \xe2\x80\xa2 revision 92ae191c17\nTools \xe2\x80\xa2 Dart 2.12.0 (build 2.12.0-133.2.beta)\n

\n

当我尝试/build/web/index.html在 Chrome 浏览器中打开时，它显示空白。这是通常的情况还是我需要安装任何节点包才能使其运行？

\n

注意：我遵循了这个文档https://flutter.dev/docs/get-started/web。

\n

这与index.html中的这段代码有什么关系吗？它似乎没有包含在早期的flutter版本中？

\n

  <!--\n    If you are serving your web app in a path other than the root, change the\n    href value below to reflect the base path you are serving from.\n\n    The path provided below has to start and end with a slash "/" in order for\n    it to work correctly.\n\n    Fore more details:\n    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base\n  -->\n  <base href="/">\n

\n

Answer 1

您需要从 npm 安装 node.js 服务器才能运行该网站。

npm install -g http-server

将目录更改为 /build/web 并在本地主机上运行服务器：

npx http-server

Answer 2

补充一下主题，您还可以使用 python 来提供服务器：设置本地测试服务器

\[flutter_project]\build\web> python -m http.server

或者

\[flutter_project]\build\web> python -m SimpleHTTPServer

然后转到本地主机：8000