Приложение Vue.js работает в разработке, но не монтирует шаблон в рабочей среде с Rails 5.2.0 / Webpacker - пустой экран без ошибок в консоли

Я использую Rails 5.2.0 и гем Webpacker для развертывания приложения 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> место его монтирования было удалено из DOM после разбора JS.

Самое странное, что я смог заставить приложение смонтировать ONCE, подключив отладчик к строке console.log и отключив его, пока отладчик приостанавливал выполнение. Даже когда я видел приложение, монтируемое в то время, я не мог заставить его монтировать его позже, даже снова возиться с отладчиком... это действительно очень странно.

Это версии package.json:

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

Приложение Rails совершенно новое, без настроек, отличных от настроек по умолчанию.

Gem Webpacker - 3.5.3, а Rails - 5.2.0.

Потратив очень много времени на это, я обнаружил только эту проблему с github: https://github.com/rails/webpacker/issues/1520

РЕДАКТИРОВАТЬ: я предоставляю ссылку на реальное, производственное приложение, где эта ошибка происходит: https://planilha.tramitacaointeligente.com.br/planilhas/ED2sUXz32-R9CJKdkmtf8Q

Вы увидите, что это не монтаж. Вот та же страница в разработке:

скриншот установленного приложения

2 ответа

Решение

В конце концов мне удалось решить эту проблему, изменив способ определения загрузки приложения Vue.

Пытаться import Vue from 'vue' (вместо from 'vue/dist/vue.esm') а потом:

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

Комментарии, которые появляются в скаффолде hello_vue.js из гема Webpacker, говорят о том, что вы можете выбирать между использованием DOM в качестве шаблона или загрузкой компонента с помощью функции рендеринга; они оба работают в разработке, но только последняя (загрузка компонента с помощью функции рендеринга, использование vue вместо vue/dist/vue.esm и render: h => h(RootComponent) работала для меня в производстве.

Это был, безусловно, самый длинный и самый разочаровывающий сеанс отладки в моей жизни, так как в консоли абсолютно нет ошибок, вы просто смотрите на пустой экран, а Vue работает, так как удаляет элемент DOM, из которого он был смонтирован. ДОМ.

Источник решения: /questions/24553874/prilozhenie-rails-5-webpacker-razvertyivaetsya-na-heroku-kak-pustaya-stranitsa-bez-sboev/24553885#24553885 и вот проблема github (в настоящее время открытая) на геме Webpacker https://github.com/rails/webpacker/issues/1520

Я до сих пор не знаю, как использовать DOM в качестве шаблона в Vue.

У меня была похожая проблема в Rails 5.2 + вебпак 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 часть - исправление ситуации.

Хром молча игнорирует это. Firefox показывает предупреждения.

Другие вопросы по тегам