局域网访问 vue + vite 项目失败

背景

vite.config.ts 设置 server.host 为'0.0.0.0'无效，开始以为是防火墙的问题，后续设置开放端口同样不起作用

解决方法

1. 安装 nginx 本地部署项目

1. 官网安装 window 稳定版压缩包
2. 电脑系统盘新建文件夹'nginx'（其他英文命名也可）
3. 提取压缩包内容到文件夹'nginx'（注意：文件夹'nginx'所在路径不能包含中文名，否则启动时会报错，如: /web 服务器/nginx/...❎, /webServer/nginx/...✅），文件夹目录如下
4. 打包 vite 项目
5. 文件内'nginx'新建文件夹'vite-dome'，将打包完的 dist 文件夹全部内容 copy 进入
6. 修改 conf => nginx.conf 配置文件，文件主要配置如下

server {
        listen       8088;
        server_name  localhost;
        location / {
            # 项目
            root   front-projects/preview-quotation-app;
            # 索引
            index  index.html index.htm;
            try_files $uri $uri/ @router;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

7. 终端（或 cmd）打开文件夹'nginx'，输入检查命令

nginx -t

8. 直接点击nginx.exe运行 nginx 服务器，或者终端打开文件夹'nginx'输入启动命令

start nginx

9. 输入命令检查 nginx 是否启动成功

tasklist /fi "imagename eq nginx.exe" // 失败则报 "信息: 没有运行的任务匹配指定标"

10. 中途修改配置后，输入重启命令

nginx -s reload

11. 关闭 nginx

nginx -s stop // 强制停止命令
nginx -s quit // 有序停止命令

2. 电脑防火墙开放端口

度娘搜索"局域网开放端口访问"，有许多详细的答案，这里无需开放端口方位，我就不一一赘述了，这里主要说下踩坑的点

1. 电脑控制面板 => 系统和安全 => Windows Defender 防火墙 => 运行应用或功能通过 Windows Defender 防火墙 => 勾选 node.exe，问题完美解决

备注：nginx 初始启动时，电脑会弹出询问窗，同意后该选项会自动启用，所以一切都是原因2，之所以放后面讲，是觉得虽然有点坑，不过复习了一遍 nginx，还是挺有收获的