问题描述
我正在使用 Rails 5.2.0 和 Webpacker gem 来部署 Vue 应用程序.
show.html.erb 文件很简单:
<div data-behavior="vue-app"><MyComponent></MyComponent></div>
然后在我的入门包中，packs/my_vue_app.js:
从'vue-turbolinks'导入TurbolinksAdapter；从 'vue/dist/vue.esm' 导入 VueVue.use(TurbolinksAdapter);从'../components/my_app/index.vue'导入MyComponentdocument.addEventListener('turbolinks:load', () => {var element = $('[data-behavior="vue-app"]');if(!element) { return };console.log('初始化 Vue');const app = new Vue({el:元素[0]，数据: {},组件:{ MyComponent }})})在开发中，一切正常.该应用程序已安装且功能正常.
但在生产中，页面加载和JS运行后，<div data-behavior="vue-app">从分页中移除，只留下<!-- --> 在它的位置.
在控制台中，绝对没有错误.我可以使用 DevTools 确认包 js 文件已加载并已解析，因为 console.log 打印在控制台中.
哎呀，Vue 正在工作的证据是，在 JS 解析后，挂载它的整个
最奇怪的是，我可以通过在 console.log 行上附加调试器并在调试器暂停执行时将其关闭来让应用挂载一次.即使当时我看到应用程序安装很困难，我以后也无法安装它，甚至再次摆弄调试器......这真的，真的很奇怪.
这些是 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 问题:
我最终通过改变 Vue 应用加载的定义方式解决了这个问题.
尝试 import Vue from 'vue'(而不是 from 'vue/dist/vue.esm')，然后:
const app = new Vue({el:dom元素，渲染:h =>h(根组件)})出现在来自 Webpacker gem 的 hello_vue.js 脚手架中的注释告诉您，您可以选择使用 DOM 作为模板或使用渲染函数加载组件；他们都在开发中工作，但只有后者(使用渲染函数加载组件，使用 vue 而不是 vue/dist/vue.esm 和 render: h => h(RootComponent) 在生产中为我工作.
到目前为止，这是我一生中最长、最令人沮丧的调试会话，因为控制台中绝对没有错误，您只需盯着空白屏幕，Vue 正在运行，因为它删除了原来的 DOM 元素从 DOM 挂载.
解决方案来源:https://stackoverflow.com/a/48651338/1290457，这里是github问题(当前打开)在 Webpacker gem https://github.com/rails/webpacker/issues/1520
我仍然不知道如何在艰难的生产环境中使用 DOM 作为模板和 Vue.
I'm using Rails 5.2.0 and Webpacker gem to deploy a Vue application.
The show.html.erb file is very simple:
<div data-behavior="vue-app"><MyComponent></MyComponent></div>
And then in my entry pack, 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 }
})
})
In development, everything works absolutely fine. The app is mounted and functional.
But in production, after the page load and JS runs, <div data-behavior="vue-app"> is removed from the paging, leaving only <!-- --> in it's place.
In the console, there are absolutely no errors. I can confirm using DevTools that the pack js file is loaded, and it was parsed, since the console.log is printed in the console.
Heck, the proof that Vue is working is that the entire <div> where it was mounted was removed from DOM after JS parsing.
The weirdest thing of all is that I could get the app to mount ONCE, by attaching a debugger on the console.log line and turning it off while the debugger paused execution. Even tough I saw the app mounting that time, I could not get it to mount later on, even fiddling with the debugger again ... it's really, really weird.
These are the versions of package.json:
"vue": "^2.5.16","vue-loader": "14.2.2","vue-template-compiler": "^2.5.16",
The Rails app is brand new, with no config other than the default.
Webpacker gem is 3.5.3 and Rails is 5.2.0.
After spending a really long time on this, I only found this github issue: https://github.com/rails/webpacker/issues/1520
EDIT: I'm providing a link to the real, production app where this bug is happening: https://planilha.tramitacaointeligente.com.br/planilhas/ED2sUXz32-R9CJKdkmtf8Q
You'll see it's not mounting. Here's the same page in development:
I eventually managed to solve it by changing how the Vue app loading was defined.
Try import Vue from 'vue' (instead of from 'vue/dist/vue.esm') and then:
const app = new Vue({
el: domElement,
render: h => h(RootComponent)
})
The comments that appear in the hello_vue.js scaffold from the Webpacker gem tell you that you can choose between using the DOM as your template OR load the component with a render function; they both do work in development, but only the latter (loading the component with a render function, using vue instead of vue/dist/vue.esm and render: h => h(RootComponent) worked for me in production.
This has been, by far, the longest, most frustrating debugging session of my life, since there are absolutely no errors in console, you just stare into a blank screen, and Vue is running since it removes the DOM element it was mounted to from the DOM.
Source of solution: https://stackoverflow.com/a/48651338/1290457 and here's the github issue (currently open) on Webpacker gem https://github.com/rails/webpacker/issues/1520
I still don't know how to use DOM as template with Vue in production tough.
这篇关于Vue.js 应用程序可以在开发中使用，但不能在使用 Rails 5.2.0/Webpacker 的生产中安装模板 - 控制台中没有错误的空白屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！