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