vue如何去除#-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“vue如何去除#”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue如何去除#”這篇文章吧。

10年積累的網(wǎng)站制作、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有上杭免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

2、build以后部署到服務(wù)器，會(huì)出現(xiàn)刷新頁面報(bào)404錯(cuò)誤，查看了一些資料和官方vue history模式的配置方法進(jìn)行嘗試，我原以為就這樣配置一下就可以了，結(jié)果……

我的網(wǎng)站是阿里云虛擬機(jī)+nginx+tomcat進(jìn)行建站，在nginx的配置文件中，起初為去掉#時(shí)配置如下（網(wǎng)站正常運(yùn)行）：

初始配置1

這種情況下，我將vue的路由改為history模式，地址中的#去掉了，但是也會(huì)出現(xiàn)上面所說的，刷新頁面時(shí)報(bào)404錯(cuò)誤，前端路由交給了后端去處理造成mapping匹配不上導(dǎo)致。

官方的nginx解決辦法

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

更新配置文件1

重啟nignx服務(wù)后進(jìn)行測(cè)試，結(jié)果在我禁止從緩存中獲取的情況下，首頁可以訪問到，但是所有的靜態(tài)資源無法訪問

靜態(tài)資源無法訪問

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

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

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

更新配置文件2

結(jié)果首頁都放問不到了

403禁止訪問

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

403 Forbidden 只是一個(gè)HTTP狀態(tài)碼，像404,200一樣不是技術(shù)上的錯(cuò)誤。

哪些場(chǎng)景需要返回403狀態(tài)碼的場(chǎng)景？

1.網(wǎng)站禁止特定的用戶訪問所有內(nèi)容，例：網(wǎng)站屏蔽某個(gè)ip訪問。

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

3.用戶訪問只能被內(nèi)網(wǎng)訪問的文件。

以上幾種常見的需要返回 403 Forbidden 的場(chǎng)景。

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

我使用了nginx代理就不應(yīng)該再在nginx處進(jìn)行配置，我需要在nginx的后面tomcat或者應(yīng)用上進(jìn)行修改。（可能我項(xiàng)目的設(shè)計(jì)比較奇葩，將vue打包目錄與后臺(tái)springboot后臺(tái)打包目錄放到一起了前后臺(tái)的首頁都是同一個(gè)html）

1、鑒于我項(xiàng)目的特殊性，在不改變項(xiàng)目結(jié)構(gòu)的情況下，我在應(yīng)用中我 進(jìn)行404 status轉(zhuǎn)發(fā)，

具體代碼如下：

index首頁轉(zhuǎn)發(fā)

經(jīng)過測(cè)試，雖然刷新時(shí)訪問的頁面仍然報(bào)404，但是可以重新加載該“頁面”，實(shí)現(xiàn)了“刷新頁面”。

頁面加載成功，network報(bào)404

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

結(jié)果與1、中前臺(tái)現(xiàn)象一樣，只是network狀態(tài)變成了304

頁面加載成功，network顯示304

禁用緩存后結(jié)果如圖：

禁用緩存后，狀態(tài)碼200

至此，我的問題已經(jīng)得到完美解決！

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

以上是“vue如何去除#”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱：vue如何去除#-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://muchs.cn/article44/dgcoee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、定制開發(fā)、外貿(mào)建站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)