在 Ruby on Rails 项目中集成 Nuxt3 js 作为前端

Question

我有一个 Rails(7.0) 项目和 Nuxt3 作为前端。两者单独工作正常。

我想要的是当我点击 Rails 路线时使用 Nuxt 页面作为视图。

不幸的是，我只找到了 Rails 和 Nuxt3 单独运行的项目/示例。

示例： https://medium.com/@fishpercolator/how-to-separate-frontend-backend-with-rails-api-nuxt-js-and-devise-jwt-cf7dd9da9d16

https://github.com/KevinBerthier/nuxt-rails-a-la-webpacker

那么我如何从 Rails 控制器渲染 Nuxt3 页面。

Answer 1

我用 Rails 后端和 Nuxt 前端制作了一个类似的项目。我的 Nuxt 应用程序设置为 SPA 模式，我将其导出为静态站点，并将生成的文件复制到 Rails 的公共文件夹中，以便我可以通过 Rails 路线提供

index.html

。不过，这只是在进行部署时。在开发过程中，我只是在不同的端口上运行 2 个独立的服务器（Rails 和 Nuxt）。

我刚刚在

get '*unmatched_route', :to => 'application#index'

的末尾添加了

routes.rb

来捕获任何路线，并将其传递给 nuxt 并让它处理渲染。我还在

application_controller.rb

中添加了这个：

def index
  render file: Rails.root.join('public/index.html'), layout: false
end

然后我可以在

routes.rb

（通配符之前）中为我想通过 nuxt 调用的 API 添加路由。由于 Nuxt 应用程序（静态 HTML）和 Rails API 均由同一 Rails 服务器提供服务，因此当 Nuxt 应用程序调用 Rails API 时，我不会遇到 CORS 问题。

这种方法的唯一缺点是您无法在 nuxt 应用程序提供数据时预加载数据（也称为 SSR）。您只能提供静态 nuxt 应用程序，并让它通过向 Rails API 发出 XHR 请求来获取数据。