VUE頁面刷新404

一、配置nginx（nginx和項目要在一臺機器上）

當訪問vue頁面時，直接訪問url會被http server直接解析到該文件路徑，可是spa的路由是虛擬的，並不能直接找到這個file，因此會404；

須要把全部的請求所有指向（不知道這麼說是否是準確）index，而後讓js的router解析url， nginx 須要配置 try_files $url /index.html

（出現該問題的緣由，可查看HTML5 History 模式：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90）

nginx裏配置修改：

http {
    
     #front
    server {
        listen       80;
        server_name  localhost;

        location / {
             root   /data/............;  #前端項目路徑
             index  index.html;
        }
        error_page   404 500 502 503 504  /index.html;
        location = /index.html {
            root   /data/............;
        }
    }
}

 

二、也可在前端代碼所在的tomcat中的web.xml中配置

<error-page>    
    <error-code>404</error-code>    
    <location>/</location>    
</error-page> 

以下圖：

這個方式有一個弊端，雖然能夠解決404的顯示問題，可是這個404會被瀏覽器捕獲到，這就形成一個坑，若是你的WEB項目是在微信中打開的，微信捕獲到404後，就會重定向到公益頁面，就形成了刷新，直接跳到了公益頁面。

 

三、一些linux命令

命令：su     -- 切換到root，而後會提示輸入密碼

cat nginx.conf   查看該文件
vim nginx.conf   編輯該文件
insert鍵    開始編輯
先按Esc,而後【Shift+：】,而後【wq!】保存並強制退出    --- 編輯好後,退出

查看當前所在目錄：
cd ~
pwd

查看nginx進程：
ps -ef|grep nginx
ps -ef 查看全格式的所有進程
ps -ax 查看所有進程
ps -ef|grep <進程名> 查看並篩選 跟進程名有關的進程，該進程名能夠是進程的所有或者部分

測試機器能不能訪問外網
curl http://www.baidu.com

查看80端口是否被佔用：（監控狀態爲LISTEN表示已經被佔用）
netstat -anp |grep 80
查看當前全部已經使用的端口狀況：
netstat -nultp    

建立nginx文件夾：
mkdir /mnt/data/nginx
刪除nginx文件夾：
rm -rf /mnt/data/nginx

解壓資源包：
tar -zxvf 壓縮包名

查找sbin文件
find / -iname sbin

搜索tomcat裏catalina.sh文件中某一內容,如：cygwin=false
grep cygwin=false catalina.sh
grep -n cygwin=false catalina.sh   （並輸出所在行數）

查看」cygwin=false「內容在某目錄下，哪一個文件中，並輸出行數
grep -n cygwin=false /apache-tomcat-7.0.90/bin/*

改變nginx文件的擁有者和羣組：
chown -R app:app /mnt/data/nginx

賦予nginx目錄讀寫等權限給app這個用戶：
chmod 755 /mnt/data/nginx

打tar包：
tar -zcvf 文件名+日期.tar.gz 文件地址