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

Question

运行

flutter build web

会在

index.html

中创建

/build/web/

文件以及

assets                    icons                     manifest.json
favicon.png               index.html                version.json
flutter_service_worker.js main.dart.js

当前的 flutter 通道是 beta 版。

$ flutter channel

Flutter channels:  
  master  
  dev  
* beta  
  stable

flutter --version

Flutter 1.25.0-8.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 8f89f6505b (2 weeks ago) • 2020-12-15 15:07:52 -0800
Engine • revision 92ae191c17
Tools • Dart 2.12.0 (build 2.12.0-133.2.beta)

当我尝试在 Chrome 浏览器中打开

/build/web/index.html

时，它显示空白。这是通常的情况还是我需要安装任何节点包才能运行？

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

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

  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    Fore more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
  -->
  <base href="/">

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

然后转到 localhost:8000

Answer 3

对我来说这有效：

1. 从 python.org 下载 Python 并安装。
2. 打开命令提示符并输入您的构建/Web 路径，如下所示：

   cd C:\Users\YourUSER\Documents\build\web

3. 输入

   python -m http.server 8080

   -> 这是您的应用程序专用的另一个端口。
4. 打开 Edge 浏览器并输入：

   http://localhost:8080

5. 点击右上角图标按钮（安装你的App在你自己的页面上运行） 就是这样！您可以在桌面上创建一个快捷方式来自动运行！