【发布时间】:2019-06-19 14:20:09
【问题描述】:
所以我有一个使用 bootstrap-vue 作为导航栏的 nuxt 应用程序。折叠时,导航元素添加了一个名为style="display: none;" 的属性,当单击切换时,样式属性将被删除,但是单击时样式属性仍然存在,因此您可以想象我的导航栏不会因此而切换。现在我在另一个组件中使用这个导航栏并且没有问题。它在开发中也能正常工作。这个问题出现在我的生产设置中。我不确定这是配置问题还是错误,但我没有找到太多相关信息。
在开发中我运行构建命令npm run dev
在生产中我运行构建命令npm run generate
有没有人遇到过类似的问题?
这是导航栏的代码
<template>
<b-navbar
toggleable="md"
type="light"
variant="white">
<b-navbar-brand href="#">
<img
class="hero-logo"
src="~assets/TraxitHeroLogo.png"
>
</b-navbar-brand>
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-collapse
id="nav_collapse"
is-nav
style
>
<b-navbar-nav class="ml-auto">
<b-nav-item href="#mission">Our Mission</b-nav-item>
<b-nav-item to="/features/overview">Features</b-nav-item>
<b-nav-item href="#pricing">Pricing</b-nav-item>
<b-nav-item href="#contact">Contact</b-nav-item>
<b-nav-item to="/support">Support</b-nav-item>
<b-nav-item
class="login-btn"
to="/login"
>
Login
</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</template>
【问题讨论】:
-
您是否在两个组件中重复使用相同的 id("nav_collapse")?
-
您解决了这个问题吗?最新版本现在面临完全相同的问题(在开发中工作,在生产中失败)
标签: bootstrap-vue nuxt.js