一、服务器安装Nginx
首先需要准备一台服务器，安装Docker+CentOS,根据文档指引安装Nginx 或者下载Xshell 安装
Xshell 安装步骤
1.运行 yum install nginx
当需要确认时输入”y“回车。 安装完成后，
2.通过命令 nginx -t
查看nginx所在的安装目录。nginx默认会安装在 /etc/ 目录下
/etc/nginx/nginx.conf
3.输入 启动nginx服务
sudo nginx -c /etc/nginx/nginx.conf
如果启动过程中出现如图所示
可以使用 sudo fuser -k 8080/tcp 释放 后再次启动nginx服务
在命令行输入命令 cd /etc/nginx 切换到nginx目录下，再输入 cat nginx.conf 可查看当前nginx配置文件。
在nginx目录下，输入 vim nginx.conf 进入nginx配置编辑模式，然后按键盘 i 键，当命令行左下角出现-- INSERT-- 的时候，通过鼠标上下键进行文件修改，具体配置如下图：
location / {
root /opt/build/dist; //打包文件放置位置
try_files $uri $uri/ /opt/build/dist/index.html;会出现刷新500
try_files $uri $uri/ /index.html; // 路由重定向解决页面刷新404问题
}
当完成Nginx配置文件的修改后，按键盘ESC键退出编辑模式，然后输入 :wq 并回车，保存修改并退出。 修改完nginx配置文件后
需要输入 nginx -s reload 重启nginx配置。这里如果重启失败，可输入 nginx -c /etc/nginx/nginx.conf ，然后再次重启
最后在阿里云服务器安全/防火墙配置中添加在nginx.conf中配置的端口号 如图所示:
保存成功后，在浏览器输入阿里云的公网ip访问，就可以看到Nginx运行成功了
二、Vue项目运行到服务器上
这边以若依Vue示列来操作
- git clone gitee.com/weifengze/R…
- 执行num run build:prod 打包dist文件夹
- 将dist文件夹使用xftp上传至刚刚配置的opt/build路径下
- 上传成功后访问公网IP可以看到出现若依登录界面
此时会发现一个问题，当我们刷新页面后页面会提示 Nginx Error 页面失效了
我们重新打开 /etc/nginx/nginx.conf文件找到 本地文件位置增加一行 try_files uri/ /index.html;
location / {
root /opt/build/dist;
try_files $uri $uri/ /index.html;
}
作用为路由重定向解决页面刷新404问题,添加完成后执行 nginx -s reload重新启动nginx后再次刷新页面 问题解决~
三、Hash与History在Nginx中的区别
1.History 模式的 URL 更美观和干净，更类似传统的 URL 结构。
2.Hash 模式的 URL 兼容性好，不需要特殊的服务器配置，可以在几乎所有的环境中使用。
3.在使用 History 模式时，需要确保服务器端配置正确，以便在刷新页面或直接访问子路由时，能正确返回对应的页面。而 Hash 模式不需要这样的配置。
总之，History 模式的 URL 可能会更符合用户的习惯，但需要对服务器进行配置。Hash 模式则更简单易用，但 URL 中会有一个 # 符号。选择使用哪种路由模式，取决于项目需求和服务器环境。
