1.安裝Nginx
（1）下載地址：https://nginx.org/en/download.html
（2）建議選穩(wěn)定版下載
（3）下載好后，直接解壓即可
2.啟動Nginx以及常用命令
（1）啟動nginx時，使用命令進(jìn)行操作；不要直接雙擊nginx.exe，在nginx根目錄下直接輸：cmd。
啟動時會一閃而過是正常的
2.1 常用命令
（1）啟動nginx：start nginx
①啟動后查看任務(wù)進(jìn)程是否存在，dos或打開任務(wù)管理器都行
- dos查看：
tasklist /fi “imagename eq nginx.exe” - 任務(wù)管理器查看
如果都沒有可能是啟動報錯了查看一下日志，在nginx目錄中的logs文件夾下error.log是日志文件，
常見的錯誤：
- 端口號被占用
- nginx文件夾路徑含中文
- 其他錯誤就詳細(xì)看log中的描述
（2）停止nginx：
①快速停止：nginx -s stop
②完整有序的關(guān)閉：nginx -s quit
（3）重新加載nginx配置：nginx -s reload
（4）檢測配置文件：nginx -t -c conf/nginx.conf
（5）查看nginx版本：nginx -v
補(bǔ)充：有時修改nginx配置文件并不生效，可殺死nginx進(jìn)程重啟，以下命令可殺死nginx所有進(jìn)程
taskkill /IM nginx.exe /F
3.部署前端打好的dist包
server {
listen 9090; # 定義端口號;
server_name localhost; # 定義服務(wù)名
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' true;
add_header 'Access-Control-Allow-Headers' *;
add_header 'Access-Control-Allow-Methods' *;
add_header 'Access-Control-Expose-Headers' *;
root html/dist; # 打包后的文件目錄,這里是相對路徑，也可以寫帶磁盤的絕對路徑
index index.html index.htm;
try_files $uri $uri/ /index.html; # 防止刷新出現(xiàn)404
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# 代理轉(zhuǎn)發(fā)
location /prod-api/ {
proxy_pass http://10.0.11.246:9595/;
}
4.前端部署nginx刷新后404，解決Nginx刷新頁面后404的問題
（1）添加try_files $uri $uri/ /index.html，然后重啟一下nginx問題就解決了。
解釋：try_files 表示檢查文件是否存在，返回第一個找到的文件，這里設(shè)置是index.html內(nèi)部重定向。
（2）另外，還有一種404報錯的問題，可能是nginx訪問文件權(quán)限問題，
①打開nginx.conf，第一行默認(rèn)是這樣的文章來源：http://www.zghlxwxcb.cn/news/detail-763204.html
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
以下省略
②可能是你訪問的路徑，需要root權(quán)限，而你啟動nginx使用的普通用戶，權(quán)限不足導(dǎo)致訪問不到文件，所以可以這么修改：文章來源地址http://www.zghlxwxcb.cn/news/detail-763204.html
user root;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
以下省略
到了這里，關(guān)于安裝Windows版nginx以及部署前端代碼并就解決刷新出現(xiàn)404的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
