在最近幫客戶開發的一個項目中，由于項目的特殊性，需要用到 Vue 中的 history路由模式。該模式使用時會涉及到“上傳白屏”和“刷新 404 問題”。在幫助客戶解決這兩個問題的過程中，總結問題的解決方案并記錄下來，希望能夠保留這篇文檔，以備將來遇到同樣問題可以順利解決。

【項目環境】

項目域名：https://www.is.capital測試服務器：Tomcat
運營服務器：Nginx（寶塔面板）

【為什么要使用 history 路由模式】

起初項目開發過程中使用的是 hash 路由模式，在第一次上傳測試服務器讓客戶瀏覽時，客戶說無法看到頁面。該項目面對的是境外澳洲的最終用戶，在國內都可以順利看到頁面的前提下，我猜測是境外無法看到國內域名末尾帶有#的項目。
盡管該結論并沒有得到最終明確的論證，但是我決定使用 history 模式嘗試一下。當將路由模式改為
history 之后，客戶反映在境外可以看到該項目的頁面了。

【上傳白屏問題】

測試服務器是我自己購買的一個服務器，該服務器上有許多項目存在，因此我在服務器根目錄下創建了一個名為 security2 的子目錄，用來存放該客戶的項目。上傳白屏就是由于這個子目錄導致的。

結論：若項目上傳至服務器的二級目錄下，則需要在路由文件中將二級目錄名由 base 屬性指定。
例如：本次開發過程中，項目上傳至了測試服務器的二級目錄 security2 中，則路由文件\router\index.js
的配置如下所示。
const router = new VueRouter({ mode:“history”,
base:“/security2”, // 將服務器的二級目錄名作為路由的基地址
routes
});

【刷新 404 問題】

使用 history 路由模式開發的項目，除了首頁以外，其他子頁面在刷新時會出現 404 錯誤。該問題的解決需要后臺服務器的設置才能完成。本項目的針對測試服務器和運營服務器均進行了相應的調整。
1、Tomcat 服務器：
在后臺的項目跟目錄下，找到下列文件：
webapps\security2\WEB-INF\web.xml

在該文件中添加下列代碼：

<location>/security2/index.html</location>

2、Nginx 服務器：
最終的運營服務器客戶選擇了寶塔面板的 Nginx 服務器。該服務器要修改以下兩個配置文件。
（1）nginx.conf 配置文件：
/www/server/nginx/conf/nginx.conf
（2）多域名配置文件：
/www/server/panel/vhost/nginx/域名.conf
將上述兩個文件在寶塔面板找到，添加下列內容。
location / {
try_files $uri $uri/ /index.html;
}
現將寶塔面板Nginx 服務器的設置方式截圖如下。

nginx.conf 文件的路徑

多域名配置文件的路徑

可以選擇將上述兩個文件通過右側的“下載命令”下載至本地進行編輯，再上傳至寶塔面板。也可以直接單擊右側的“編輯”命令，通過寶塔面板自身提供的在線編輯器進行更改。

通過在線編輯器更改服務器配置的截圖如下所示。

寶塔面板的在線編輯器