記一次vue去除#問題處理經過
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前後端分離開發,整合後上線部署,這種方式奇葩嗎?如果我不該變專案結構是否會有完美的解決方法?知道的大神請留言解惑一下,感激不盡……