如何在本地浏览器中打开已编译的Flutter Web index.html文件？

Question

运行 flutter build web 会在 /build/web/ 目录下创建 index.html 文件，并附带其他文件。

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时，它显示为空白。这是正常的吗？还是需要安装任何node包来使其运行？

注意：我按照此文档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="/">

- Saw Thinkar Nay Htoo

Answer 1

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

npm install -g http-server

切换到 /build/web 目录并在本地主机上运行服务器：

npx http-server

- Calvin Gonsalves

---

太棒了！谢谢。 - Saw Thinkar Nay Htoo

@SawThinkarNayHtoo 没问题 :) - Calvin Gonsalves

嘿，我有一个问题，实际上我在本地主机上启动了服务器，然后我无法从那里退出我的项目，现在我很慌张，因为我担心会被黑客和窃贼攻击。我对这个领域一无所知，不幸的是我关闭了终端，所以我无法控制+ c，也不知道有多少主机正在运行，请尽快帮助我。 - user14089096

@Lucian，我想关闭终端窗口会停止http服务器。你可以尝试一下这个原文中提到的解决方案：https://dev59.com/OWUq5IYBdhLWcg3wF8rw - Calvin Gonsalves

Answer 2

除此之外，您还可以使用Python来搭建服务器：设置本地测试服务器

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

或者

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

然后前往 localhost:8000

- Jonas Cerqueira

---

我不得不使用Python3。\[flutter_project]\build\web> python3 -m http.server - Suat Özkaya

Answer 3

对我来说，这个方法行得通：

1. 从python.org下载并安装Python。 2. 打开命令提示符，并输入你的构建/网页路径，例如：cd C:\Users\YourUSER\Documents\build\web。 3. 输入python -m http.server 8080，这是专门为你的应用程序提供的另一个端口。 4. 打开Edge浏览器，输入：http://localhost:8080。 5. 点击右上角的图标按钮（将yourApp安装到自己的页面上）。 就是这样！你可以在桌面上创建一个快捷方式以实现自动运行！

- V. Rodrigues