Это полностью работает для меня и спасло мою задницу !!! другие ответы заставляют вас рефакторировать весь ваш код.
ользую 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, я могу подтвердить, что файл пакета 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
Вы увидите, что это не монтаж. Вот та же страница в разработке:
