資訊專欄INFORMATION COLUMN
摘要：項目實現(xiàn)前后端分離。默認(rèn)模式使用的來模擬一個完整的，于是當(dāng)改變時，頁面不會重新加載。沒有特別的要求的話，模式亦正常訪問?？纯次臋n，要實現(xiàn)模式也很簡單。切換一下模式，本地測試?yán)?。配置一下沒錯，部署前端資源服務(wù)器上簡單加上一條通用匹配規(guī)則。
項目：laravel + vue 實現(xiàn)前后端分離。
vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，于是當(dāng) URL 改變時，頁面不會重新加載。
hash URL 例如：http://yoursite.com/#/user/id。
history 模式時，URL就像正常的 url，例如 http://yoursite.com/user/id。
沒有特別的要求的話，hash模式亦正常訪問。好嘛，產(chǎn)品要求URL要像正常那樣的 —— history模式的?？纯磛ue文檔，要實現(xiàn)vue history模式也很簡單。vue 切換一下模式，本地測試ok啦。
接下來，看到還需要后臺配置支持:
因為VUE應(yīng)用是個單頁客戶端應(yīng)用，如果后臺沒有正確的配置，當(dāng)用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。所以呢，你要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
So,Nginx配置一下:
location / {
try_files $uri $uri/ /index.html;
}
沒錯，部署前端資源Nginx服務(wù)器上,簡單加上一條通用匹配規(guī)則。
至此，vue 前端搞定了，但是。。。還是不行的！
原因是從前端服務(wù)器訪問是正常了，但是域名指向的是后端服務(wù)器，所以當(dāng)vue router history模式url直接訪問時還是會404.
當(dāng)?shù)竭@里，又回頭排查一下是不是前面哪里搞錯了，仔細(xì)看下來，沒問題啊，完全按vue文檔說明操作啦。
想一陣子，才找到思路：404是后端報出的，也就說Laravel給出的，laravel router 壓根就沒前端定義的路由。所以，當(dāng)即一拍腦子，就想到是不是將laravel 異常處理在response出去前給中斷一下，將404處理交給前端再處理一下，那么也只是需要在app/Exceptions/Handler中render方法加下判斷：
/**
* Render an exception into an HTTP response.
*
* @param IlluminateHttpRequest $request
* @param Exception $exception
* @return IlluminateHttpResponse
*/
public function render($request, Exception $exception)
{
// 解決vue history 地址丟失問題
if($exception instanceof SymfonyComponentHttpKernelExceptionNotFoundHttpException)
{
if ($exception->getStatusCode() == 404) {
return response()->view("welcome");
}
}
return parent::render($request, $exception);
}
解釋一下：welcome 就是加載了vue CSS和JS，也就是vue依賴文件。
以上搞定前后端分離，vue history 404 問題！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/29611.html
摘要：項目實現(xiàn)前后端分離。默認(rèn)模式使用的來模擬一個完整的，于是當(dāng)改變時，頁面不會重新加載。沒有特別的要求的話，模式亦正常訪問?？纯次臋n，要實現(xiàn)模式也很簡單。切換一下模式，本地測試?yán)?。配置一下沒錯，部署前端資源服務(wù)器上簡單加上一條通用匹配規(guī)則。 項目：laravel + vue 實現(xiàn)前后端分離。vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 UR...
摘要：使用能優(yōu)雅的構(gòu)建并且與單頁面應(yīng)用程序完美結(jié)合。我們將重點關(guān)注所需的所有部分，然后在后續(xù)教程中，我們將進(jìn)一步演示如何使用作為層。例如，如果用戶刷新路由，我們將需要匹配該路由并返回應(yīng)用程序模板。運行應(yīng)用程序該基礎(chǔ)用于構(gòu)建具有和路由器的。 使用Laravel能優(yōu)雅的構(gòu)建API并且與Vue單頁面應(yīng)用程序（SPA）完美結(jié)合。在本教程中，我們將展示如何啟動和運行Vue路由器以及用于構(gòu)建SPA的La...
摘要：這個方法我沒有嘗試過，不過應(yīng)該是可行的這樣的優(yōu)點是很簡便，適合小型的網(wǎng)站項目將打包的項目和服務(wù)端分別部署客戶端根目錄主頁避免模式刷新管理控制后臺服務(wù)端跨域這樣部署雖然稍微麻煩一點，但可以適應(yīng)很多場景，而且開發(fā)分工更方便，結(jié)構(gòu)也一目了然 我個人想了2種部署方案 1、將vue項目打包后放入node服務(wù)端的靜態(tài)資源中訪問 整體結(jié)構(gòu)基本是這樣的 showImg(https://segmentf...
摘要：模式部署沒有什么問題，只要訪問到服務(wù)器上的，就可以訪問網(wǎng)站了。問題起因在做年度賬單項目的時候，項目部署的時候，用的是模式。這樣幾項配置后，就可以在子目錄下訪問網(wǎng)站，刷新也沒有問題。 寫在前面 Vue-Router 有兩種模式，默認(rèn)是 hash 模式，另外一種是 history 模式。 hash：也就是地址欄里的 # 符號。比如 http://www.example/#/hello，...
閱讀 3392·2023-04-26 01:40
閱讀 3094·2021-11-24 09:39
閱讀 1403·2021-10-27 14:19
閱讀 2649·2021-10-12 10:11
閱讀 1311·2021-09-26 09:47
閱讀 1849·2021-09-22 15:21
閱讀 2718·2021-09-06 15:00
閱讀 899·2021-08-10 09:44
