之前总想着自己尝试一下开发完项目，打包后自己部署一下，奈何不是没时间就是进行到一半就放弃了，最近刚好有空就尝试下，差点又放弃了，虽然历尽波折，总算最后还是解决了。

这里以 vite+react+ts 项目为准，react 是使用 history 模式开发的，项目打包时开启了 gzip 压缩并删除了源文件

这里以 Mac 环境为例，未安装 nginx 的需要先安装 nginx，可以使用 brew 安装

brew install nginx

安装好后，就可以开始部署了
更改 nginx.conf 配置文件，也可重新创建配置文件（在 nginx/servers 中，创建 xxx.conf 配置文件），然后在 nginx.conf 配置文件的 http 下使用 include 引入一下即可

server {
	listen       8080;
    server_name  localhost;  #替换为你的域名或 IP 地址
    location / {
        root  /path/to/your/react/build;  #打包后存放项目的路径
        index  index.html index.htm;
        try_files $uri /index.html;   #使用history模式的，必须配置，否则刷新页面会报404
    }

    gzip  on;   #开启gzip功能
    gzip_vary on;  # 是否在http header中添加Vary: Accept-Encoding，**一定要开启,不开启读取不到.gz结尾的压缩文件**
    gzip_static on;  #开启gzip静态压缩功能

    # 其他静态资源，必须配置，否则会读取静态资源失败，MIME类型错误等信息
    location ~* \.(js|css|html|png|jpg|jpeg|gif|ico|svg)(\.gz)?$ {
        root /path/to/your/react/build;
        expires 30d;
        add_header Cache-Control "public, must-revalidate";
    }
  }
}

至此，配置完毕，项目可以正常运行了，刷新也是正常的。