天天看點

Vue-router history模式下Nginx配置

對于VUE的router[mode: history]模式(這裡主要是為了去除連結上的"#")

開發的時候,一般都不出問題。是因為開發時用的伺服器為node,Dev環境中已配置好了,

nginx運作的時首頁沒有問題,連結也沒有問題,但在點選重新整理後,頁面就會顯示(404)

原配置:

location / {
        root  /home/testhadoop/www/html;
        index index.html index.htm;
    }
           

解決方案如下:

方案一:

使用try_files

文法:

try_files file1 [file2 ... filen] fallback

location / {
    root  /home/testhadoop/www/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}
           

方案二:

location /{

    root  /home/testhadoop/www/html;
    index  index.html index.htm;

    if (!-e $request_filename) {
        rewrite ^/(.*) /index.html last;
        break;
    }
}