Javascript 为什么Vue没有初始化？

我有一个Rails应用程序。有时我会在页面上放置Vue组件。它可以是简单的动态列表。但是也可能有一个更复杂的实现，其中有许多相互嵌套的组件

首先，我将向您展示它是如何工作的（代码）

Rails应用程序中主层的部分代码：

body
  #app
    = yield

以及JS中的部分代码：

if (document.getElementById('app')) {
  new Vue({
    el: '#app',

现在是关于这个问题

有时，当我打开浏览器时，我加载了没有Vue组件的页面。这个问题在macOS Chrome/Safari和iOS Safari中同样重要。但是如果我手动重新加载页面，那么一切都很好

---

有什么问题吗？为什么浏览器在启动后会快速加载页面（可能是从缓存加载的？），并且对Vue的反应很差？

在DOM就绪时执行代码：

document.addEventListener('DOMContentLoaded', (event) => {
  if (document.getElementById('app')) {
    new Vue({
     el: '#app',
     ...
})

---

您是否使用TurboLink和webpacker？@Sovalina only webpacker。谢谢。我会试试你的选择。在几天内，看看它将如何工作。