Vue.js应用程序可在开发中运行，但无法在Rails 5.2.0 / Webpacker中的生产环境中安装模板-空白屏幕，控制台中无错误

Question

我正在使用Rails 5.2.0和Webpacker gem部署Vue应用程序。

show.html.erb文件非常简单：

<div data-behavior="vue-app"><MyComponent></MyComponent></div>

然后在我的入门包中，包是packs / my_vue_app.js：

import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm'
Vue.use(TurbolinksAdapter);
import MyComponent from '../components/my_app/index.vue'

document.addEventListener('turbolinks:load', () => {

  var element = $('[data-behavior="vue-app"]');

  if(!element) { return };

  console.log('Initializing Vue');

  const app = new Vue({
    el: element[0],
    data: {

    },
    components: { MyComponent }
  })
})

在开发中，一切正常。该应用程序已安装并正常运行。

但是在生产中，在页面加载和JS运行之后，<div data-behavior="vue-app">从分页中删除，只剩下<!-- -->。

在控制台中，绝对没有错误。我可以使用DevTools确认pack js文件已加载并已解析，因为console.log已打印在控制台中。

哎呀，Vue运行正常的证明是，在解析JS之后，已将其安装的整个<div>从DOM中删除了。

最奇怪的是，我可以通过在console.log行上附加调试器并在调试器暂停执行时将其关闭来使该应用程序挂载ONCE。即使当时我看到应用程序正在安装也很艰难，但后来却无法安装它，甚至再也不用调试器了……这真的非常奇怪。

这些是package.json的版本：

"vue": "^2.5.16", "vue-loader": "14.2.2", "vue-template-compiler": "^2.5.16",

Rails应用程序是全新的，除了默认设置外没有其他配置。

Webpacker gem是3.5.3，Rails是5.2.0。

花了很长时间后，我才发现这个github问题：https://github.com/rails/webpacker/issues/1520

编辑：我提供了发生此错误的实际生产应用程序的链接：https://planilha.tramitacaointeligente.com.br/planilhas/ED2sUXz32-R9CJKdkmtf8Q

您会看到它没有安装。这是开发中的同一页面：

Answer 1

我最终设法通过更改Vue应用程序的加载方式来解决此问题。

尝试import Vue from 'vue'（而不是from 'vue/dist/vue.esm'），然后：

const app = new Vue({
    el: domElement,
    render: h => h(RootComponent)
  })

Webpacker gem的hello_vue.js支架中显示的注释告诉您，您可以选择使用DOM作为模板，也可以使用呈现功能加载组件。它们都可以在开发中工作，但是只有后者（使用vue而不是vue / dist / vue.esm使用vue加载具有渲染功能的组件，然后渲染：h => h（RootComponent）在生产中对我有用。

到目前为止，这是我一生中最长，最令人沮丧的调试会话，因为控制台中绝对没有错误，您只能盯着空白屏幕，并且Vue正在运行，因为它删除了原来的DOM元素。从DOM安装。

解决方案来源：https://stackoverflow.com/a/48651338/1290457，这是Webpacker gem https://github.com/rails/webpacker/issues/1520上的github问题（当前已打开）

在生产过程中，我仍然不知道如何在Vue中使用DOM作为模板。

Answer 2

我在Rails 5.2 + webpack Vue中遇到了类似的问题。一切都很好，但不能用于生产。经过数小时的调查，我找到了原因。来自webpaker gem docs的建议中。

添加此

Rails.application.config.content_security_policy do |policy|
  if Rails.env.development?
    policy.script_src :self, :https, :unsafe_eval
  else
    policy.script_src :self, :https
  end
end

大批量生产。删除else部分-解决情况。

Chrome默默地忽略了这一点。 Firefox显示警告。