Nuxt 页面转换在本地工作，但不适用于 Firebase 托管

Question

我使用 nuxt 页面转换 2 种不同的方式，它们都可以在 localhost 上工作，但不能在 firebase 托管上工作。

我在全球范围内同时使用内置的页面转换。我也尝试在每一页上定义过渡。两种方式都在 localhost 上工作，但在托管时不会触发动画。

第一种方式 - 使用全局转换

// Layout transitions
.layout-enter-active, .layout-leave-active {
  transition: opacity 0.5s;
}
.layout-enter, .layout-leave-active {
  opacity: 0;
}

// Page transitions
.page-enter-active, .page-leave-active {
  transition: opacity 0.5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}

第二种方式，使用页面定义的过渡。

  export default {
  transition: 'fade',
  components: {}
...
}

没有错误消息。在谷歌开发工具中，动画甚至没有被触发。

Answer 1

我解决了这个问题。我在 nuxt.config 中使用了全局 CSS 文件中的过渡 CSS

  css: ['~/assets/global.scss'],

我需要将用于过渡的 CSS 放在 .vue 组件中才能正常工作。