vuejs2 - 组件已安装，但模板标签未在生产环境中呈现(但在开发中呈现): Nuxtjs Vuejs Vuetifyjs Rollupjs

Question

概要

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

1. 使用 Vuetify 组件制作自定义 Vue 组件
2. 使用这些 Vuetify 组件和 (1) 中的自定义组件创建了一个自定义 Vue 组件
3. 使用 rollupjs 将这些组件捆绑在一起
4. 在 npm 上发布了这些组件
5. 使用组件的本地版本(而不是 npm 中的版本)将 (2) 中的“主”组件示例部署到 GitLab 页面
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 存储进行 react 也可以)，但 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>

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

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

我不确定我哪里出错了，在这篇文章的底部是组件和测试存储库的快速链接，以及像 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

链接

• 组件存储库:

  • npm package of component
  • gitlab page of the component
  • git repository of component
  • rollup.config.js of component
  • package.json file of component
  • nuxt.config.js of component's repo
  • entry.js used by rollup.config.js
  • offending component VRecordsTable

• 测试仓库

  • gitlab page of the test repo
  • test repo

预感

• 带有npm run start的东西与 npm run dev/nuxt 是如何构建的问题？
• 问题出在我配置 rollup.config.js 的方式上？
• 问题出在 vuetify 上？

Answer 1

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

test-valpha 使用的是 vuetify-loader，但 valpha 没有使用，因此不会自动导入所需的 vuetify 组件。通常你会收到关于此的警告，但是 nuxt suppresses warnings in production mode和 @nuxtjs/vuetify 模块 only uses vuetify-loader in production mode由于某种原因，所以在开发过程中一切似乎都工作正常。

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

• 在 valpha 中导入所需组件(见下文)并且
• 始终使用 vuetify-loader setting treeShake to true在测试-valpha中

或者

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

导入组件

如果库使用了 webpack，你只需要安装 vuetify-loader，但是没有类似的 rollup，所以你需要手动添加它们 as described in the documentation :

<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>