vue項目線上頁面刷新報404 解決方法

時間 2019-11-10

標籤 vue 項目線上頁面刷新解決方法简体版

原文原文鏈接

在上線vue開發的前端網頁上線後，刷新頁面報404錯誤，由於網頁上顯示的是靜態絕對路徑，實際上服務器上是沒有改路徑的因此刷新彙報錯誤。php

一、vue框架中解決404html

vue router mode 默認爲hsas, 這樣的url中帶有#，若是把mode: 'history'就能去掉#號，也能夠正常訪問，可是再次刷新頁面就會出現404錯誤。前端

const router = new Router({
mode: 'history'
});
url中帶有#，讓有強迫症的人很不爽，能夠去掉，去掉後就須要改nginx配置文件了。vue

二、修改nginx配置文件nginx

location / {
root ...
index ...
try_files $uri $uri/ /index.html; ---解決頁面刷新404問題
}

將上面代碼放入nginx配置文件中服務器

保存退出框架

. ./nginx -t -- 驗證nginx配置文件是否正確
. ./nginx -s reload -- 重啓nginx
記得修改完nginx配置文件必定要重啓nginx 否則沒有效果！！！post

Nginx--try_files 解釋

1、Nginx的配置語法靈活，可控制度很是高。在0.7之後的版本中加入了一個try_files指令，配合命名location，能夠部分替代本來經常使用的rewrite配置方式，提升解析效率。

做用域：server location

location  / {
                root  /var/www/build;
                index  index.html index.htm;
                try_files $uri $uri/ @rewrites;
        }
  
location @rewrites {
             rewrite ^(.+)$ /index.html last;
        }

try_files $uri $uri/ @rewrites
這句話是什麼意思？

try_files從字面上理解就是嘗試文件，再結合環境理解就是「嘗試讀取文件」，那他想讀取什麼文件呢，

答：讀取靜態文件

$uri 這個是nginx的一個變量，存放着用戶訪問的地址,

好比：http://www.xxx.com/index.html, 那麼$uri就是 /index.html

$uri/ 表明訪問的是一個目錄，好比：http://www.xxx.com/hello/test/ ，那麼$uri/就是 /hello/test/

完整的解釋就是：try_files 去嘗試到網站目錄讀取用戶訪問的文件，若是第一個變量存在，就直接返回；

不存在繼續讀取第二個變量，若是存在，直接返回；不存在直接跳轉到第三個參數上。

好比用戶訪問這個網地址：http://www.xxx.com/test.html

try_files首先會判斷他是文件，仍是一個目錄，結果發現他是文件，與第一個參數 $uri變量匹配。

而後去到網站目錄下去查找test.html文件是否存在，若是存在直接讀取返回。若是不存在直接跳轉到第三個參數，而第三個參數是一個location,而這個location裏面配置的就是rewrite規則。

2、常見的nginx配置文件中常見以下寫法：

server {
        listen 80;
        server_name localhost;
        root html/;
        index index.html index.htm index.php;
        location / {
            try_files $uri $uri/ /index.php?$args;
            proxy_pass http://www.baidu.com;
        }
        location ~ \.(html|htm)$ {
            try_files $uri = 404;
        }
        location ~ \.php$ {
            try_files $uri = 404;
            include fastcgi.conf;
            fastcgi_pass 127.0.0.1:9000;
        }
    }

try_files網站

這個東西是重定向用的，我感受和index 差很少，不過確實比index 要好用ui

舉個例子：

訪問：xf.com/aa

若是咱們這麼設置，對於這一句的理解是。

try_files $uri $uri/ /index.php?$args;

當nginx 收到你的xf.com/aa ，那麼會匹配到

location / {
try_files $uri $uri/ /index.php?$args;
proxy_pass http://www.baidu.com;
}

這裏多說一嘴，若是沒有合適的匹配，那麼就會找index的值。

index.html inde.htm index.php

當找到相對應的文件，就會把你的訪問url變成。

xf.com/index.html或者xf.com/index.htm xf.com/index.php 其中一個