时间戳

首页 > 解决方案 > 组件已安装但模板标签未在生产环境中呈现（但在开发中呈现）： Nuxtjs Vuejs Vuetifyjs Rollupjs

vuejs2 - 组件已安装但模板标签未在生产环境中呈现（但在开发中呈现）： Nuxtjs Vuejs Vuetifyjs Rollupjs

问题描述

同义词

请允许我解释发生了什么。我做了以下事情：

  1. 使用 Vuetify 组件制作自定义 Vue 组件
  2. 使用这些 Vuetify 组件和 (1) 中的自定义组件制作了一个自定义 Vue 组件
  3. 使用 rollupjs 将这些组件捆绑在一起
  4. 在 npm 上发布这些组件
  5. 使用组件的本地版本（而不是来自 npm 的版本）部署到 GitLab 页面（2）中的“主”组件示例
  6. 做了一个新的nuxt项目
  7. 码头化它
  8. 我从（4）安装我的包并使用它
  9. 在 GitLab 页面上部署了这个测试存储库

是什么激发了这篇文章的灵感： 1. 在组件的存储库 GitLab 页面上（上面的第 5 步），组件被渲染和安装 2. 在测试存储库 GitLab 页面上（上面的第 9 步），组件已安装，但是模板未呈现（例如，它就像它的模板标签<my-component></my-component>） 3. 在测试存储库中，在开发中使用 docker 一切正常 4. 在测试存储库中，组件已安装但未呈现

细节

VRecordsTable从包中调用有问题的组件valpha。它是 Vuetify 组件的包装器，VDataTable并添加了自定义插槽、逻辑和一些其他组件。（下面的链接）。

该组件已安装在生产中（数据在那里，通过 vuex 存储反应也可以），但 html 如下：


<v-col><v-data-table page="0" items-per-page="5" items="record1,record2,record3,record4,record5,record6,record7,record8,record9" calculate-widths="true" fixed-header="" headers-length="7"></v-data-table></v-col>

这是下面链接的测试存储库中的图像，显​​示了我的意思：

在此处输入图像描述

请注意，该组件在那里安装了所有数据，但与所有其他组件不同，它没有查看内部组件的下拉菜单。

我不确定我哪里出错了，在这篇文章的底部是快速链接到组件和测试 repo 的 repo，除了有用的文件，比如rollup.config.js

有用的命令

对于测试仓库中的 docker，请使用：

# dev
docker-compose -f docker-compose.development.yml build
docker-compose -f docker-compose.development.yml up
docker-compose -f docker-compose.development.yml down

# prod
docker-compose -f docker-compose.production.yml build
docker-compose -f docker-compose.production.yml up
docker-compose -f docker-compose.production.yml down

链接

预感

标签： vuejs2vue-componentvuetify.jsnuxt.jsrollupjs

解决方案

https://github.com/vuetifyjs/vuetify-loader/issues/70

test-valpha 正在使用 vuetify-loader 但 valpha 不是，因此不会自动导入所需的 vuetify 组件。通常您会收到有关此问题的警告，但nuxt 在生产模式下会抑制警告，并且 @nuxtjs/vuetify 模块出于某种原因仅在生产模式下使用 vuetify-loader ，因此在开发过程中一切似乎都运行良好。

github问题中列出了一些解决方案：

  • 导入所需的组件valpha（见下文）和
  • 始终通过在 test-valpha 中将 treeShake设置为 true 来使用 vuetify-loader

或者

  • 不要在 test-valpha ( treeShake: false)中使用 vuetify-loader

导入组件

如果该库使用 webpack，您只需要安装 vuetify-loader，但汇总没有类似的东西，因此您需要按照文档中的说明手动添加它们：

<template>
  <v-card>
    <v-card-title>...</v-card-title>
    <v-card-text>...</v-card-text>
  </v-card>
</template>

<script>
  import { VCard, VCardText, VCardTitle } from 'vuetify/lib'

  export default {
    components: {
      VCard,
      VCardText,
      VCardTitle,
    }
  }
</script>

推荐阅读