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

3qpi33ja  于 5个月前  发布在  Ruby
关注(0)|答案(1)|浏览(55)

我有一个Rails(7.0)项目和Nuxt 3作为前端。两者都单独工作正常。
我想要的是当我点击Rails路由时使用Nuxt页面作为视图。
不幸的是,我只找到了那些Rails和Nuxt 3单独运行的项目/示例。
示例: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控制器渲染Nuxt 3页面

qlvxas9a

qlvxas9a1#

我用Rails后端和Nuxt前端做了一个类似的项目。我的Nuxt应用配置为ssr: false, target: 'static',我会将其导出为静态站点,并将生成的文件复制到Rails的公共文件夹中,这样我就可以通过Rails路由为index.html提供服务。不过,这只是在进行部署时。在开发过程中,我只是在不同的端口上运行两个单独的服务器(Rails和Nuxt)。
我只是在routes.rb的末尾添加了get '*unmatched_route', :to => 'application#index'来捕获任何路由,并将其传递给nuxt,让它处理渲染。我还在application_controller.rb中添加了这个:

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

字符串
然后,我可以在routes.rb中(在NXT之前)为我想通过nuxt调用的API添加路由。由于Nuxt应用程序(静态HTML)和Rails API都由同一个Rails服务器提供服务,因此当Nuxt应用程序调用Rails API时,我不会遇到CORS问题。
这种方法的唯一缺点是,你不能在nuxt应用程序中预加载数据(也称为SSR)。你只能服务静态nuxt应用程序,让它通过XHR请求向Rails API获取数据。

相关问题