时间戳

首页 > 解决方案 > bootstrap-vue toast 未显示在服务器上

toast - bootstrap-vue toast 未显示在服务器上

问题描述

在我们的网站上，我们正在使用敬酒，至少我们想要这样做。该网站使用 bootstrap-vue 来展示 toast。这适用于我的开发机器，一旦我将它推送到我们的服务器（S3 存储桶），吐司就不会弹出。当我检查网站时，我可以看到吐司在那里，但是在网站上，吐司应该在的地方只有空白，没有显示任何文字。

这就是我所说的吐司：

created() {
const id = '1'

const vNodesMsg = this.$createElement(
  'p',
  { class: ['text-left', 'text-charcoal'] },
  [
    this.$createElement(
      'strong',
      'This is the message the user will see when he gets to this page'
    ),
    this.$createElement(
      'b-button',
      {
        on: { click: () => this.$bvToast.hide(id) }
      },
      'Close'
    )
  ]
)

this.$bvToast.toast([vNodesMsg], {
  id,
  noCloseButton: true,
  noAutoHide: true,
  toaster: 'b-toaster-bottom-full',
  isStatus: true,
  solid: false,
  appendToast: false,
  variant: 'secondary',
  visible: true
})
},

在我的机器上检查网站后，我发现代码没有任何区别。除了显示吐司。

我能做些什么？

任何帮助是极大的赞赏。

为了更详细地说明这一点：

npm run dev

然后去 localhost:3000 工作。

npm run build
serve -s dist

并转到 localhost:5000 不起作用。

将 dist 文件夹复制到我们的服务器并调用网站也不起作用。这并不奇怪。

可能是我的配置中缺少某些东西吗？

谢谢，

迈克尔

标签： toastbootstrap-vue

解决方案

我以某种方式想通了。
我创建了一个新项目，吐司弹出。我将新项目中的每个配置文件与另一个进行了比较。在我更改了 tailwind 的 dev 依赖项之前，没有任何效果

"@nuxtjs/tailwindcss": "^1.0.0"

到

"@nuxtjs/tailwindcss": "^3.4.2"

推荐阅读