Windows+Nginx 部署 Flutter Web

最新推荐文章于 2025-09-12 15:03:32 发布

原创最新推荐文章于 2025-09-12 15:03:32 发布 · 921 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #flutter #wep

WEB 同时被 2 个专栏收录

8 篇文章

订阅专栏

Flutter

1 篇文章

订阅专栏

本文介绍了如何使用Flutter SDK 2.x创建支持Web的项目，通过`flutter create`命令添加Web支持，然后使用`flutter build web`进行编译。编译完成后，通过Nginx配置将Flutter Web应用部署在本地服务器，并提供了Nginx配置示例。只需访问http://localhost:8083/index.html即可查看Web应用。

今天的内容比较简单，我们直接进入主题。

创建工程

目前笔者用的 Flutter SDK 是 Stable 2.x，其已经支持 Web了。

使用 Android Studio 创建 Flutter 工程，需要勾选上对 Web 的支持，如下图所示：
在这里插入图片描述

如果你之前创建的工程没有勾选该选项，可以在工程目录下执行如下命令：

# flutter create <output directory>
# Create a new Flutter project in the specified directory.
flutter create .

Recreating project ....
  web\favicon.png (created)
  web\icons\Icon-192.png (created)
  web\icons\Icon-512.png (created)
  web\index.html (created)
  web\manifest.json (created)

Wrote 8 files.

All done!

完成之后，在工程目录下就会生成 web 目录。
在这里插入图片描述

编译 Web 版本

编译 Web 版本只需要一行命令

flutter build web

编译成功后，在工程的 build 目录下面有个 web 目录。

Nginx 配置

在 Nginx 的配置文件中，增加一个 server 配置即可。

server {
        listen       8083;
        server_name  localhost;
        location / {
            # web目录的路径
            root   \project-path\build\web;
            # 默认页面
            index  index.html index.htm;
        }
    }

启动 Nginx（关于 Windows 上面操作 Nginx 的命令，可以参考笔者的减少跨域中的OPTIONS请求) ，然后在浏览器中访问 http://localhost:8083/index.html 即可。

学习犹如爬山，适当的咬紧牙关冲刺一把，就能一览众山小
在这里插入图片描述