Rails 6 实现展示所有可公开访问静态资源列表的方法

你需要的类/rails/mailers的资源调试页面完全可以实现，且默认只会在开发环境生效，同时支持展示编译前后的两类资源列表。

第一步：注册开发环境专属路由 #

打开config/routes.rb，在现有路由规则基础上增加开发环境的专属路由：

Rails.application.routes.draw do
  # 你的原有路由保持不变

  if Rails.env.development?
    get '/rails/assets', to: 'rails/assets#index'
  end
end

第二步：创建调试控制器 #

新建app/controllers/rails/assets_controller.rb，内置编译前后资源的读取逻辑，同时做环境校验避免生产环境误暴露：

class Rails::AssetsController < ApplicationController
  before_action :ensure_development_env

  def index
    # 读取已编译、可直接公开访问的静态资源（存放在public/assets目录下）
    @compiled_assets = Dir.glob(Rails.root.join('public', 'assets', '**', '*')).select { |f| File.file?(f) }.map do |path|
      {
        visit_path: path.sub(Rails.root.join('public').to_s, ''),
        size: File.size(path),
        mtime: File.mtime(path)
      }
    end

    # 读取编译前的所有源资源，覆盖官方默认资源目录+npm包目录，适配老旧npm包排查需求
    source_search_paths = [
      Rails.root.join('app', 'assets', '**', '*'),
      Rails.root.join('lib', 'assets', '**', '*'),
      Rails.root.join('vendor', 'assets', '**', '*'),
      Rails.root.join('node_modules', '**', '*')
    ]
    @source_assets = source_search_paths.flat_map { |p| Dir.glob(p) }.select { |f| File.file?(f) }.map do |path|
      {
        logical_path: path.sub(Regexp.union(source_search_paths.map { |p| p.to_s.sub('**/*', '') }), ''),
        real_path: path
      }
    end.uniq { |item| item[:logical_path] }
  end

  private
  # 强制校验环境，生产环境直接返回403
  def ensure_development_env
    head :forbidden unless Rails.env.development?
  end
end

第三步：创建调试展示页面 #

新建app/views/rails/assets/index.html.erb，简单实现资源列表的可视化展示：

<!DOCTYPE html>
<html>
<head>
  <title>Rails 开发环境静态资源列表</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 1400px; margin: 0 auto; padding: 24px; }
    .block { margin: 48px 0; }
    .asset-row { padding: 6px 12px; border-bottom: 1px solid #eee; font-size: 14px; }
    code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>开发环境静态资源调试页</h1>

  <div class="block">
    <h2>已编译可直接访问的公开资源</h2>
    <p>路径可直接拼接在站点域名后访问，可用来校验资源是否编译成功</p>
    <div>
      <% @compiled_assets.each do |asset| %>
        <div class="asset-row">
          <code><%= asset[:visit_path] %></code>
          <small>（大小：<%= number_to_human_size(asset[:size]) %>，最后修改时间：<%= asset[:mtime].strftime("%Y-%m-%d %H:%M") %>）</small>
        </div>
      <% end %>
    </div>
  </div>

  <div class="block">
    <h2>编译前可用源资源</h2>
    <p>包含所有框架可检索到的源文件，可用来排查资源引用路径错误、npm包缺失等问题</p>
    <div>
      <% @source_assets.each do |asset| %>
        <div class="asset-row">
          逻辑引用路径：<code><%= asset[:logical_path] %></code>
          <small>本地实际存储位置：<%= asset[:real_path] %></small>
        </div>
      <% end %>
    </div>
  </div>
</body>
</html>

老旧npm包加载问题额外排查技巧 #

• 如果你用Rails6默认的Webpacker打包前端资源，可以修改config/webpacker.yml把compile_debug参数设为true，编译时会输出完整的资源检索路径，方便定位包找不到的问题
• 执行rails assets:precompile时加上--trace参数，可以看到完整编译流程，定位报错环节
• 可以在浏览器控制台直接打印你引入的npm包对象，确认是否被正确打包挂载到全局作用域

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