如何在Rails 7.0项目中集成Nuxt3并从控制器渲染其页面

方案一：预渲染静态Nuxt页面，Rails直接调用静态文件 #

适合无需服务端动态渲染的场景：

• 修改Nuxt3项目的nuxt.config.ts，配置预渲染路由：

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/', '/about', '/articles'] // 列出需要预渲染的页面路径
    }
  }
})

• 执行npm run generate，Nuxt会在.output/public目录生成对应静态HTML文件
• 将这些HTML文件复制到Rails项目的public目录，或直接配置Rails视图路径指向Nuxt生成目录
• 在Rails控制器中渲染静态文件：

class HomeController < ApplicationController
  def index
    render file: Rails.root.join('public', 'index.html'), layout: false
  end

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

• 若需要保留Rails全局布局，移除layout: false，但需手动调整Nuxt生成HTML的<head>标签，避免与Rails布局重复。

方案二：代理Nuxt服务请求，Rails返回渲染后的HTML #

适合需要Nuxt服务端动态渲染的场景：

• 在Nuxt3项目中执行npm run build && npm run start，启动Nuxt生产服务（默认端口3000）
• 在Rails中创建控制器，通过HTTP请求获取Nuxt渲染后的HTML：

require 'net/http'

class NuxtProxyController < ApplicationController
  def render_page
    nuxt_service_url = "http://localhost:3000#{request.path}"
    response = Net::HTTP.get_response(URI(nuxt_service_url))
    
    if response.is_a?(Net::HTTPSuccess)
      render html: response.body.html_safe
    else
      render status: response.code, plain: response.message
    end
  end
end

• 配置Rails路由，将目标路由指向该控制器：

Rails.application.routes.draw do
  # 保留原有API路由
  namespace :api do
    resources :posts
  end

  # 所有前端页面路由交给Nuxt代理控制器
  get '/*path', to: 'nuxt_proxy#render_page'
end

方案三：集成Nuxt SPA到Rails静态资源 #

适合单页应用场景，让Nuxt处理前端路由：

• 在Nuxt3项目执行npm run build，生成SPA打包文件（位于.output/public）
• 将该目录下所有文件复制到Rails项目的public目录
• 创建Rails控制器返回Nuxt的入口HTML：

class SpaEntryController < ApplicationController
  def index
    send_file Rails.root.join('public', 'index.html'), type: 'text/html', disposition: 'inline'
  end
end

• 配置Rails路由，将非API的HTML请求指向该控制器：

Rails.application.routes.draw do
  namespace :api do
    # API路由定义
  end

  # 仅处理非AJAX的HTML请求，避免干扰API接口
  get '/*path', to: 'spa_entry#index', constraints: ->(req) { !req.xhr? && req.format.html? }
end

内容的提问来源于stack exchange，提问作者Oliver Jacob