是否可以在生产环境中使用 Rails、Webpacker 将 Vue.js 组件挂载到 DOM 上？答案

【问题标题】：Is it possible to mount Vue.js components on the DOM in production using Rails, Webpacker?是否可以在生产环境中使用 Rails、Webpacker 将 Vue.js 组件挂载到 DOM 上？
【发布时间】：2019-02-03 15:09:06
【问题描述】：

我有一个 Rails 5.2.1 应用程序，想以零碎的方式集成 Vue；在 Foreman 一起启动 Rails 和 webpacker 开发服务器的情况下，我的一切工作都很好。

我用 id="vue-app" 将 body 标签内的所有内容包装在一个 div 中，并在 packs/app.js 中使用以下内容安装应用程序：

document.addEventListener('turbolinks:load', () => {
  const app = new Vue(Vue.util.extend({ i18n }, App)).$mount('#vue-app')
})

这在开发中工作得很好——我可以在任何元素上添加 vue 指令，并在我需要的任何地方放入我的组件。但是，当在生产模式下运行相同的东西时（在资产预编译之后），应用程序无法挂载到 #vue-app 并且只是用 HTML 注释替换它。 Vue 本身加载正常，编译似乎很好，一切都在找到 - 它只是默默地无法安装。

我已经研究了几个小时，除了重复的这个之外找不到任何东西：Vue.js app works in development but not mounting template in production with Rails 5.2.0 / Webpacker - blank screen with no errors in console

他的解决方案是将挂载更改为新元素上的渲染函数，但以“我仍然不知道如何在生产中使用 DOM 作为模板与 Vue 一起使用”结束。

如果 Vue 不能安装在现有元素上，它会严重降低它的吸引力，所以我很好奇是否可以在 Rails/webpacker 的生产环境中使用 DOM 模板？

【问题讨论】：

您使用的是字符串还是 DOM 模板 (template: '<div>foo</div>')？ Vue 模板编译器可能不包含在生产版本中。如果您使用带有 vue-loader 的预编译 .vue 文件，那么您应该很好。
是的，我用 id="vue-app" 将正文标签中的所有内容都包裹在一个 div 中（抱歉，刚刚注意到标签已从原始问题中删除，我现在将对其进行更新）
我这样做的方法是我从 dist/ 中读取 html 并让它链接到 public/dist 中的 JS 和 CSS 文件。

标签： ruby-on-rails vue.js webpack

【解决方案1】：

我想我已经解决了我自己的问题 - 我相信这是由于 package.json 中的依赖项不匹配造成的。当我在处理 Vue 应用程序的其他方面时，我可能无意中把它搞砸了。我生成了一个新的 Rails 应用程序，添加了 Webpacker 和 Vue，确认它可以在生产环境中使用已编译资产的 DOM 模板，然后将干净的 package.json 中的版本复制到我现有的应用程序中。

【讨论】：