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

Question

同义词

请允许我解释一下这是怎么回事。我做了以下事情：

使用 Vuetify 组件制作自定义 Vue 组件
使用这些 Vuetify 组件和 (1) 中的自定义组件制作了自定义 Vue 组件
使用 rollupjs 将这些组件捆绑在一起
在 npm 上发布了这些组件
使用组件的本地版本（而不是来自 npm 的版本）将来自 (2) 的 "main" 组件的示例部署到 GitLab 页面
创建了一个新的 nuxt 项目
docker化了
我从 (4) 安装我的包并使用它
在 GitLab 页面上部署了这个测试库

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

详情

有问题的组件从包 valpha 中调用 VRecordsTable。它是 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>

这是来自下面链接的测试回购的图片，显示了我的意思：

注意，该组件已全部挂载数据，但与所有其他组件不同，它没有用于查看内部组件的下拉列表。

我不确定我哪里出错了，在这个 post 的底部是组件和测试 repo 的快速链接，此外还有像 [=16= 这样的有用文件]

有用的命令

对于测试仓库中的 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

链接

组件回购：
测试回购
- gitlab page of the test repo
- test repo

预感

npm run start vs 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 and the @nuxtjs/vuetify module only uses vuetify-loader in production mode 所以在开发过程中一切似乎都运行良好。

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

在 valpha 中导入所需的组件（见下文）AND
始终在 test-valpha

setting treeShake to true

或

不要在 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>

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

Component mounted but template tags not rendered in production environment (but rendered in development): Nuxtjs Vuejs Vuetifyjs Rollupjs

rollupjs

vue-component

vuejs2

nuxt.js

vuetify.js

同义词

详情

有用的命令

链接

预感