相关疑难解决方法(0)

我正在使用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运行正常的证明是，在<div>解析JS之后，已从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 …