vue项目部署到nginx服务
vue开发的项目，通过编译会得到 dist文件夹，如何发布到nginx服务器上？
1 配置nginx服务器
在nginx服务文件中，打开 conf文件夹，如下
为了不改变nginx的默认配置（nginx.conf），复制一份，重名为 custom.conf，如下
修改 custom.conf 文件中的 root 参数为 dist，如下
......
server {
listen 80; // 监听端口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root dist; // vue项目打包的文件夹
index index.html index.htm;
}
......
2 启动 nginx 服务
在nginx.exe目录下，通过 cmd 执行下面命令，实现控制 nginx
nginx 启动nginx服务，使cmd窗口一直处于执行中，不能进行其他命令操作
start nginx 启动nginx服务，不会使cmd窗口一直处于执行中（推荐）
start nginx -c conf\custom.conf 按指定的配置文件启动nginx服务，不会覆盖nginx原始配置文件（推荐）
nginx -s stop 停止nginx服务，快速停止nginx，可能并不保存相关信息
nginx -s quit 停止nginx服务，完整有序的停止nginx，并保存相关信息（推荐）
nginx -s reopen 重启nginx服务
nginx -s reload 重启加载nginx配置文件（推荐）
nginx -v 查看nginx版本
3 vue项目刷新出现404问题
vue-router默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载，但是hash会以#号结尾。我们可以使用路由的history的模式，现实没有#号结尾，不过history的这种模式需要后台配置支持。
当我们进入项目的主页时，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404。其原因是在history模式下，通过动态js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求。但在浏览器里输入网址时，就一定要对服务器发起http请求，如果这个风址目标在服务器上又不存在，所以会返回404。
注：对于vue-router的history模式在开发的时候，不会出问题，是因为开发时用的服务器为node，dev环境中已配置好了。
怎么解决这个问题？
vue-router 的官方文档有讲，在nginx配置文件中添加try_files $uri $uri/ /index.html;，如下：
...
location / {
root dist; # 项目的静态文件夹
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
...
4 vite打包的gzip优化配置
nginx有一个模块是gzip模块，只要开启了，nginx就会帮你来把数据（静态资源 和 接口数据）进行压缩，然后传入到客户端，客户端来解压，然后在进行代码的读取，其实这一步就是节约带宽，减少传输的代码包的数量，从而节约传输时间，然后网站就能很快打开了。
修改nginx的配置文件内容如下，开启nginx的gzip功能。
gzip on; # 开启或者关闭gzip模块
gzip_buffers 4 16k; # 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流
gzip_comp_level 6; # gzip压缩比，1 压缩比最小处理速度最快
# 匹配MIME类型进行压缩，（无论是否指定）"text/html"类型总是会被压缩的
gzip_type text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;
vite打包的vue项目可以通过vite的插件vite-plugin-compression实现在vite打包时，生成gzip。vite.config.ts配置如下：
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [viteCompression({
//filter: // 过滤器，对哪些类型的文件进行压缩，默认为/.(js|mjs|json|css|html)$/i
verbose: true, //是否在控制台输出压缩结果
disable: false, // 是否禁用压缩
threshold: 10240, // 启用压缩的文件大小限制，单位是字节，默认为 0
algorithm: 'gzip', // 采用的压缩算法，默认是 gzip
deleteOriginFile: false, // 压缩后是否删除原文件，默认为 false
ext: '.gz' // 生成的压缩包后缀
})]
})
vite-plugin-compression官网：https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md
同时，也需要相应配置nginx，启动gzip模块，优先使用vite打包好的本地gzip压缩文件。
gzip on; #开启gzip功能
gzip_static on; #开启gzip静态压缩功能，您应该确保压缩和解压文件的时间戳匹配
gzip_http_version 1.1; #gzip http版本，默认是1.1，使用 gzip_static,就是要 1.1的版本
gzip_buffers 4 16k; #gzip缓存大小
gzip_comp_level 6; #gzip 压缩级别 1-10
#gzip 压缩类型
gzip_types application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
#Nginx作为反向代理的时候启用，开启或者关闭后端服务器返回的结果
gzip_proxied expired no-cache no-store private auth;
5 配置反向代理
根据上面修改的 root参数，在nginx服务器的根目录下建立 custom文件夹，如下
在 custom文件夹 中建立一个用来测试的 html文件（代码如下），其中JS代码用来测试nginx的反向代理，如下
<body>
<h1>Welcome to custom!</h1>
<p><em>Thank you for using nginx.</em></p>
<script>
fetch('/ajax/movieOnInfoList?token=&' +
'optimus_uuid=43388C403C4911EABDC9998C784A573A4F64A16AA5A34184BADE807E506D749E&' +
'optimus_risk_level=71&' +
'optimus_code=10').then(res => res.json()).then(res => {
console.log(res)
})
</script>
</body>
浏览器访问 http://localhost:80，可以看到网页正常访问，但是并没有使用nginx的反向代理获取数据，如下
再次配置 custom.conf 文件，实现反向代理，如下
......
server {
listen 80; # 监听端口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root custom; # 临时修改，测试反向代理
index index.html index.htm;
}
# 从nginx走的请求，以 /ajax 开头，代理到https//m.maoyan.com服务器上
location /ajax/ {
proxy_pass https://m.maoyan.com;
}
......
打开命令行，执行.\nginx -s reload 重启 nginx，相关代码如下，获取https//m.maoyan.com的数据，如下
