VUE頁面刷新404

1、配置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/............;
        }
    }
}

 

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

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

如下圖：

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

 

3、一些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 文件地址