Vue.js 应用程序在开发中工作，但在生产中无法使用 Rails 5.2.0 / Webpacker 安装模板 - 空白屏幕，控制台中没有错误

Question

我正在使用 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 确认包 js 文件已加载并已解析，因为 console.log 打印在控制台中。

哎呀，Vue 正常工作的证据是在 JS 解析后将其安装的整个 <div> 从 DOM 中删除。

最奇怪的是我可以让应用程序挂载一次，方法是在 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 问题：https://github.com/rails/webpacker/issues/1520

编辑：我正在为发生此错误的真实生产应用程序提供 link：https://planilha.tramitacaointeligente.com.br/planilhas/ED2sUXz32-R9CJKdkmtf8Q

您会看到它没有安装。这是开发中的同一页面：

Answer 1

我最终设法通过更改 Vue 应用加载的定义方式解决了这个问题。

尝试 import Vue from 'vue'（而不是 from 'vue/dist/vue.esm'）然后：

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

Webpacker hello_vue.js 脚手架中出现的注释 gem 告诉您可以选择使用 DOM 作为模板或使用渲染函数加载组件;他们都在开发中工作，但只有后者（使用渲染函数加载组件，使用 vue 而不是 vue/dist/vue.esm 和 render: h => h(RootComponent) 在生产中为我工作。

到目前为止，这是我一生中最长、最令人沮丧的调试会话，因为控制台中绝对没有错误，你只是盯着空白屏幕，而 Vue 运行因为它从 DOM.

移除它挂载到的 DOM 元素

解决方案来源： and here's the github issue (currently open) on Webpacker gem https://github.com/rails/webpacker/issues/1520

我仍然不知道如何在生产中使用 DOM 作为 Vue 模板。

Answer 2

我在 Rails 5.2 + webpack 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 部分 - 解决问题。

Chrome默默无视。 Firefox 显示警告。

Vue.js 应用程序在开发中工作，但在生产中无法使用 Rails 5.2.0 / Webpacker 安装模板 - 空白屏幕，控制台中没有错误

Vue.js app works in development but not mounting template in production with Rails 5.2.0 / Webpacker - blank screen with no errors in console

ruby-on-rails

webpack

vue.js

webpacker