在Rails应用中如何将实例变量传递给Webpacker加载的JS文件？

当然可以！而且有几种清爽的方案能帮你实现这个需求，不用把Rails改成API模式，也不用在HTML标签里塞一堆乱糟糟的data属性～

1. 单独的JSON脚本标签（最干净的无全局污染方式） #

这种方式把数据放在单独的JSON类型脚本标签里，既不会和DOM元素混在一起，也能让Webpacker的JS轻松读取：

在你的Rails视图或布局里添加：

<script type="application/json" id="app-init-data">
  <%= {
    current_user: @current_user.as_json(only: [:id, :username]),
    featured_posts: @featured_posts.as_json(only: [:id, :title, :created_at])
  }.to_json %>
</script>

然后在Webpacker打包的JS（比如Vue组件）里读取：

// 等待DOM加载完成后读取数据
document.addEventListener('DOMContentLoaded', () => {
  const dataElement = document.getElementById('app-init-data')
  const appData = JSON.parse(dataElement.textContent)
  
  // 现在就能在Vue里使用了，比如：
  new Vue({
    el: '#app',
    data() {
      return {
        user: appData.current_user,
        posts: appData.featured_posts
      }
    }
  })
})

2. 给组件初始化函数传参（避免全局变量） #

如果不想用全局对象，可以在Webpacker的JS里导出一个初始化函数，然后在Rails视图里直接把实例变量作为参数传进去：

首先在Webpacker的pack文件里写初始化逻辑：

// app/javascript/packs/posts-list.js
export function initPostsList(posts) {
  new Vue({
    el: '#posts-list-container',
    data: {
      posts: posts
    },
    template: `
      <div v-for="post in posts" :key="post.id">
        <h3>{{ post.title }}</h3>
        <p>发布于: {{ post.created_at }}</p>
      </div>
    `
  })
}

然后在Rails视图里调用这个函数：

<div id="posts-list-container"></div>

<%= javascript_pack_tag 'posts-list' %>
<script>
  // 确保脚本加载完成后再初始化
  document.addEventListener('DOMContentLoaded', () => {
    initPostsList(<%= @posts.to_json.html_safe %>)
  })
</script>

3. 用content_for注入命名空间数据（适合多页面场景） #

如果多个视图需要传递不同的数据，可以用Rails的content_for在布局里预留位置，统一管理全局数据：

首先在布局文件里预留位置：

<!-- app/views/layouts/application.html.erb -->
<head>
  <!-- 其他head内容 -->
  <%= yield :javascript_data %>
</head>

然后在具体视图里填充数据：

<% content_for :javascript_data do %>
  <script>
    // 用命名空间避免全局污染
    window.RailsApp = window.RailsApp || {};
    RailsApp.currentPageData = <%= {
      user: @current_user.as_json(only: [:id, :avatar_url]),
      pageTitle: @page_title
    }.to_json.html_safe %>;
  </script>
<% end %>

之后在Webpacker的JS里就能直接访问window.RailsApp.currentPageData了。

注意事项 #

• 一定要用as_json指定需要暴露的字段，别把敏感数据（比如用户密码哈希）传到前端！
• 使用html_safe确保JSON转义正确，避免XSS风险。

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