Javascript Vuetify生产中的芯片断裂

Javascript Vuetify生产中的芯片断裂,javascript,html,css,vue.js,leaflet,Javascript,Html,Css,Vue.js,Leaflet,我使用v-chip作为信息横幅,v-chip位于Vue传单地图内。芯片就是基于这个,我试着让它适应我的项目。在当地,我成功地实现了我的目标,如下图所示 问题发生在我使用firebase主机部署新的v-chip功能时,芯片损坏如下所示 由于某些原因,它在生产中没有表现出应有的效果。是指向当前已部署实现的链接。这是第72行和第79行之间的一行,下面是代码snippert <div class="text-center"> <span class="ma-2 v-

我使用v-chip作为信息横幅,v-chip位于Vue传单地图内。芯片就是基于这个,我试着让它适应我的项目。在当地,我成功地实现了我的目标,如下图所示

问题发生在我使用firebase主机部署新的v-chip功能时,芯片损坏如下所示

由于某些原因,它在生产中没有表现出应有的效果。是指向当前已部署实现的链接。这是第72行和第79行之间的一行,下面是代码snippert

<div class="text-center">
        <span class="ma-2 v-chip v-chip--outlined v-chip--pill theme--light v-size--default deep-purple accent-4 deep-purple--text text--accent-4">
          <span class="v-chip__content">
            <i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-information-outline theme--light"></i>
            ${placeholder}
          </span>
        </span>
      </div>`

${占位符}
`
我尝试过的事情

  • 我试图通过检查两个芯片使用的类和两个芯片使用完全相同的类来找出与之间的差异,因此排除了缺少的类
  • 我尝试过复制CSS,直接检查示例所用类中的CSS,并在本地repo中实现它,这只是为了更好的衡量

您没有调用v-chip组件,如果您想要获得所有样式,即使您没有在应用程序中调用它,请更改/src/plugins/中的vuetify.js:

添加缩小样式:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import "vuetify/dist/vuetify.min.css"; // Add this

Vue.use(Vuetify);

export default new Vuetify({
});

您没有调用v-chip组件,如果您想获得所有样式,即使您没有在应用程序中调用它,也可以更改/src/plugins/中的vuetify.js:

添加缩小样式:

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import "vuetify/dist/vuetify.min.css"; // Add this

Vue.use(Vuetify);

export default new Vuetify({
});

99%的几率你没有在某处使用
v-app
。为什么不使用
组件?@ohgod我为什么使用it@hans我使用javascript动态输出您使用的是类,而不是组件本身。尝试将css添加到你的vuetify插件。99%的几率你没有在某处使用
v-app
。为什么不使用
组件?@ohgod我为什么使用it@hans我使用javascript动态输出您使用的是类,而不是组件本身。尝试将css添加到vuetify插件中。