伺服器端渲染 Nuxtjs + Laravel 的快速啟動輪子

家豬配種專家發表於2021-01-21
伺服器UXJSLaravel

常常看到社群有朋友說 SPA 應用的 SEO 不好，什麼也沒有，對於這個問題，Vue 給出的解決方案是伺服器端渲染的 Nuxtjs。
那麼怎麼把伺服器端渲染的 Nuxtjs 和 Laravel 結合在一起呢？我造了一個輪子來幫助你快速開始一個 Server-Side-Render Nuxtjs + Laravel 的應用。

輪子地址：Nuxt-Laravel Quick Bootstrap Template

該輪子包含：完整的使用者認證流程（註冊、登入、登出、重置密碼、第三方賬戶登入、找回密碼）

該輪子特性：

  1. 伺服器端渲染的 Nuxtjs
  2. Laravel 後端
  3. Tailwind (Tailwind for Nuxtjs)
  4. vuesax 元件庫
  5. 跟隨系統/明亮/暗黑 模式 （vuesax 和 Tailwind 都支援）
  6. 漸進式 Web 應用（PWA）支援
  7. 多語言支援（在路由中包含的語言，這樣利於 SEO）
  8. Elasticsearch (通過為 Model 繼承一個 trait 並實現一個介面即可搜尋該 Model)
  9. Websockets by Laravel-Echo

安裝：

composer create-project dengsihan/laravel-nuxt-bootstrap project
cd project
# 配置好你的 .env
vim .env
php artisan migrate
npm install
npm run dev

nginx 配置修改

proxy_set_header X-Forwarded-For $remote_addr;
location ~* ^/(api|broadcasting)/ {
    try_files $uri $uri/ /index.php?$query_string;
}
location / {
    proxy_pass http://127.0.0.1:3000;
}

暫時的線上 Demo （第三方登入只能用 GitHub 和 Telegram）

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章