Solución:
Finalmente logré resolverlo cambiando la forma en que se definió la carga de la aplicación Vue.
Tratar import Vue from 'vue' (en lugar de from 'vue/dist/vue.esm') y luego:
const app = new Vue({
el: domElement,
render: h => h(RootComponent)
})
Los comentarios que aparecen en el scaffold hello_vue.js de la gema Webpacker le dicen que puede elegir entre usar el DOM como su plantilla O cargar el componente con una función de renderizado; ambos funcionan en desarrollo, pero solo el último (cargar el componente con una función de renderizado, usando vue en lugar de vue / dist / vue.esm y render: h => h (RootComponent) funcionó para mí en producción.
Esta ha sido, con mucho, la sesión de depuración más larga y frustrante de mi vida, ya que no hay absolutamente ningún error en la consola, solo miras una pantalla en blanco y Vue se está ejecutando, ya que elimina el elemento DOM en el que estaba montado. el DOM.
Fuente de la solución: https://stackoverflow.com/a/48651338/1290457 y aquí está el problema de github (actualmente abierto) en Webpacker gem https://github.com/rails/webpacker/issues/1520
Todavía no sé cómo usar DOM como plantilla con Vue en producción.
Tuve un problema similar en Rails 5.2 + webpack Vue. Todo estaba bien en desarrollo, pero no funcionaba en producción. Después de horas de investigar encontré la razón. Estaba en esta recomendación de los documentos de gemas de webpaker.
Añadiendo esto
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
rompe la producción. Eliminando else parte – arreglar la situación.
Chrome ignorando esto en silencio. Firefox muestra advertencias.