1、vue項目，在瀏覽器中看到的路由都是帶有#的，如果想去掉#，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。只需要在路由表中，加入一行代碼即可：使用mode: 'history'屬性，在路由代碼中添加mode：'history'即可

2、build以后部署到服務器，會出現刷新頁面報404錯誤，查看了一些資料和官方vue history模式的配置方法進行嘗試，我原以為就這樣配置一下就可以了，結果……

我的網站是阿里云虛擬機+nginx+tomcat進行建站，在nginx的配置文件中，起初為去掉#時配置如下（網站正常運行）：

初始配置1

這種情況下，我將vue的路由改為history模式，地址中的#去掉了，但是也會出現上面所說的，刷新頁面時報404錯誤，前端路由交給了后端去處理造成mapping匹配不上導致。

官方的nginx解決辦法

上面是官方給出的nginx解決辦法，于是我對nginx的域名配置文件進行修改，修改結果如下：

更新配置文件1

重啟nignx服務后進行測試，結果在我禁止從緩存中獲取的情況下，首頁可以訪問到，但是所有的靜態資源無法訪問

靜態資源無法訪問

try_files屬性按順序檢查文件是否存在，返回第一個找到的文件。結尾的斜線表示為文件夾 -$uri/。如果所有的文件都找不到，會進行一個內部重定向到最后一個參數。

index.html應該是找到了，但是為什么靜態文件找不到呢？后來我改變配置，將靜態文件與index.html地址配置到域名的根目錄（這種情況與配置地址跳轉8082有什么區別？請大神解惑一下）

更換配置，去掉8082的proxy_pass，添加root與index屬性，如下圖：

更新配置文件2

結果首頁都放問不到了

403禁止訪問

一般來說nginx 的 403 Forbidden errors 表示你在請求一個資源文件但是nginx不允許你查看。

403 Forbidden 只是一個HTTP狀態碼，像404,200一樣不是技術上的錯誤。

哪些場景需要返回403狀態碼的場景？

1.網站禁止特定的用戶訪問所有內容，例：網站屏蔽某個ip訪問。

2.訪問禁止目錄瀏覽的目錄，例：設置autoindex off后訪問目錄。

3.用戶訪問只能被內網訪問的文件。

以上幾種常見的需要返回 403 Forbidden 的場景。

我由此推斷，應該是配置中的目錄不允許訪問導致的，更新nginx.conf 啟動用戶替換為root重啟nginx嘗試，首頁與靜態資源都訪問成功（這樣配置是否存在安全隱患？）但是后臺api訪問報錯404，這樣，我意識到，我已經在錯誤的路上越走越遠了，我域名指向前端首頁，但是我域名又需要我指向后端服務，但是我用代理將域名指向后端服務以后，那我之前做的嘗試都將不起作用，

我使用了nginx代理就不應該再在nginx處進行配置，我需要在nginx的后面tomcat或者應用上進行修改。（可能我項目的設計比較奇葩，將vue打包目錄與后臺springboot后臺打包目錄放到一起了前后臺的首頁都是同一個html）

1、鑒于我項目的特殊性，在不改變項目結構的情況下，我在應用中我 進行404 status轉發，

具體代碼如下：

index首頁轉發

經過測試，雖然刷新時訪問的頁面仍然報404，但是可以重新加載該“頁面”，實現了“刷新頁面”。

頁面加載成功，network報404

2、本著求知精神，我把項目前后端分離，重新部署，嘗試使用try_files屬性驗證一下

結果與1、中前臺現象一樣，只是network狀態變成了304

頁面加載成功，network顯示304

禁用緩存后結果如圖：

禁用緩存后，狀態碼200

至此，我的問題已經得到完美解決！

本來這里就是一個小坑，由于自己的原因把這個小坑變成大坑了。雖然解決問題的過程看著有點傻， 但終于弄明白了自己的問題所在：前后端合并與分離兩種方式的區別，不要混淆

VUE前后端分離開發，整合后上線部署,這種方式奇葩嗎？如果我不該變項目結構是否會有完美的解決方法？知道的大神請留言解惑一下，感激不盡……

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。