問題:?Vue項目打包部署Nginx服務(wù)器后,刷新頁面后出現(xiàn)404的問題。
原因:?加載單頁應(yīng)用后路由改變均由瀏覽器處理,而刷新時將會請求當(dāng)前的鏈接,而Nginx無法找到對應(yīng)的頁面。
解決:在Nginx配置文件nginx.conf中加入如下配置:?
try_files $uri $uri/ /index.html;文章來源:http://www.zghlxwxcb.cn/news/detail-522936.html
# 變量解釋
try_files ?固定語法
$uri ? ? ? 指代home文件(ip地址后面的路徑,假如是127.0.0.1/index/a.png,那就指代index/a.png)
$uri/ ? ? ?指代home文件夾
/index.html ?向ip/index.html 地址發(fā)起請求
?
try_files $uri $uri/ /index.html;
嘗試解析下列2個文件/文件夾(自動分辨出,IP后面的路徑是文件還是文件夾), $uri/$uri/,
如果解析到,返回第一個,
如果都沒有解析到,向127.0.0.1/index.html發(fā)起請求跳轉(zhuǎn)(該路由必須真實,不然會報錯)文章來源地址http://www.zghlxwxcb.cn/news/detail-522936.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;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 8100;
server_name localhost;
charset utf-8;
location / {
root D:/deploy/web/http;
index index.html index.htm;
}
}
server {
listen 80;
server_name localhost;
charset utf-8;
location / {
root D:/deploy/gn/http;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
}
到了這里,關(guān)于nginx部署前端項目后刷新瀏覽器報錯404的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!