记录Nginx部署Vue项目的流程，以及部署后前端出现问题的解决方案。

目录

一、安装nginx
二、部署流程
三、解决前端路由history模式刷新页面404的问题
四、Nginx解决前端项目打包缓存问题
五、后话

一、安装nginx

http://nginx.org/ ，找到页面右下角的download，例如选nginx-1.22.1，点击下载，解压放到你心仪的盘符文件夹中。

二、部署流程

Nginx根目录重要文件说明

conf：里面有配置文件nginx.conf

html：放打包好的Vue项目，即前端dist包。
将前端打包的dist文件夹复制进来，dist重命名为前端项目的英文名称

nginx.exe：nginx启动项

如何进入命令行终端去敲命令

任选其一即可

1、按Win + R，输入cmd，回车

2、在Nginx根目录url中，清空所有，输入cmd，回车

3、在Nginx根目录按住Shift + 鼠标右键，点击 在此处选择Powershell 窗口

用文本打开，修改部署访问路径

文件路径：nginx-1.22.1\conf\nginx.conf

修改location对象的 root html/项目名称 例如 html/vitelearn;

 server {listen       9900; # 自定义端口号，找没有被占用的。怎么查看端口是否已被占用，请看下面Windows命令location / {root   html/vitelearn; # 对应nginx-1.22.1\html\项目名称 }}

Nginx.conf 完整代码如下

#user  nobody;
worker_processes  1;
events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;gzip  on;gzip_min_length  1k;          #最小压缩大小gzip_buffers     4 16k;       #压缩缓冲区gzip_http_version 1.0;        #压缩版本gzip_comp_level 2;            #压缩等级gzip_types   text/plain text/css text/xml text/javascript application/json application/x-javascript application/xml application/xml+rss font/ttf font/otf imagesvg+xml;#压缩类型server {listen       9900;location / {root   html/vitelearn;index  index.html index.htm;try_files $uri $uri/ /index.html;}#error_page  404              /404.html;error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

Window命令

不知道怎么进命令行终端，请看上面 如何进入命令行终端去敲命令

netstat -aon|findstr "XXX"   检查端口是否被占用   例如： netstat -aon|findstr "9900"
taskkill /f /t /im nginx.exe   杀死所有nginx服务进程（其中包括端口） 

Nginx命令

每次打前端dist包，先停止再重启
nginx  -s stop  停止
start nginx  启动nginx -s reload  重载
补充说明：前端dist包没变动，只修改了nginx配置，此时需要重新加载最新的nginx配置

三、解决前端路由history模式刷新页面404的问题

方案1、前端路由模式mode为history

说明：即没#号的。需要在nginx添加一行代码，添加完保存。
nginx配置修改如下：

server {location / {root   html/vitelearn;index  index.html index.htm;try_files $uri $uri/ /index.html;  # 加这一句}
}

两种情况（根据不同情况选择对应的方法，二选一即可）：
1、如果前端dist包有变动，nginx配置也变动，需要停止并重启nginxnginx  -s stop  停止  start nginx  启动
2、如果前端dist包没变动，nginx配置有变动，执行nginx重载即可nginx -s reload

再次刷新部署后的页面就不会出现404错误了。

Vue2/Vue3不同版本的history设置如下

• Vue2

在router/index.js 设置路由模式

export default new Router({routes：[....]mode: "history", 
});

• Vue3

在router/index.ts,封装路由的页面，引入history方法

import { createWebHistory } from 'vue-router'  const router = createRouter({history: createWebHistory(), routes,
})

方案2、修改路由模式mode为hash 哈希

说明：它会在url多一个#，比较难看，但它不需要在nginx配置代码，同时它刷新页面不会报404.

Vue2/Vue3不同版本的hash设置如下

• Vue2

export default new Router({routes：[....]mode: "hash", 
});

• Vue3

import { createWebHashHistory } from 'vue-router'  const router = createRouter({history: createWebHashHistory(), routes,
})

四、Nginx解决项目重新打包后，但线上页面出现缓存的问题

用文本形式打开 nginx-1.22.1\conf\nginx.conf，在location中加入这个if判断。location的其他配置不需要删除

 server {location / {if ($request_filename ~* .*\.(?:htm|html)$)  {add_header Cache-Control "no-store, no-cache";}}

五、后话

做个笔记，方便下次忘了过来查阅。小伙伴们，如果你们学完一个东西或者很有心得，有空了可以将新学的知识点整理成自己的笔记，下次遇到就无需花这么多时间查阅，而是快速回顾，精准打击，逐一击破。

加油，慢慢点亮自己的技能树。😊

参考这位大佬的文章： https://www.cnblogs.com/Yan3399/p/17202859.html，感恩感谢这位大佬🙏。