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

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

使用Vuetify组件创建自定义Vue组件

使用这些Vuetify组件和（1）中的自定义组件创建自定义Vue组件

使用rollupjs将这些组件捆绑在一起

在npm上发布这些组件

使用组件的本地版本（而不是npm版本）部署到GitLab页面（2）中的“主”组件示例

做了一个新的nuxt项目

把它扣了

我从（4）安装我的软件包并使用它

在GitLab页面上部署此测试存储库

是什么启发了这篇文章： 1.在组件的存储库GitLab页面（上面的步骤5）上，呈现和装载组件 2.在TestRepository GitLab页面（上面的步骤9）上，组件已装入，但未呈现模板（例如，它类似于其模板标签

） 3.在测试库中，在开发中使用docker一切正常 4.在测试存储库中，组件已装入但未呈现

细节 有问题的组件从包

valpha

中被称为

VRecordsTable

。它是Vuetify组件

VDataTable

的包装器，并添加自定义插槽、逻辑和一些其他组件。（以下链接）

该组件安装在生产环境中（数据在那里，通过vuex store反应也可以），但html如下所示：

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

请注意，该组件的数据都安装在那里，但与所有其他组件不同，它没有下拉列表来查看内部组件

我不确定我哪里出错了，在这篇文章的底部是组件和测试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
#刺激
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运行启动与npm运行开发的对比是如何构建nuxt的
• 问题在于我如何配置rollup.config.js
• vuetify有什么问题吗

test valpha正在使用vuetify加载程序，但valpha没有，因此不会自动导入所需的vuetify组件。通常情况下，您会收到有关此问题的警告，但由于某些原因，@nuxtjs/vuetify模块似乎在开发过程中一切正常

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

• 在

  valpha

  （见下文）中导入所需组件，并
• 始终在测试valpha中使用vuetify loader by

或

• 不要在测试valpha中使用vuetify加载程序（

  treeShake:false

  ）

导入组件

如果库使用的是webpack，则只需安装vuetify loader，但rollup没有类似的功能，因此您需要手动添加它们：

...
...
从“vuetify/lib”导入{VCard，VCardText，VCardTitle}
导出默认值{
组成部分：{
VCard，
VCardText，
VCardTitle，
}
}

1谢谢。每当我开始认为我开始知道我在做什么时，结果发现我不知道：p因为我还在学习，你能提供valpha配置的更改以及如何设置树划吗？我曾尝试在nuxt中使用vuetify点菜，但总是把它搞得一团糟。如果你这样做了，我会给你一笔赏金和奖励，所以我在valpha中添加了相关组件并尝试了

npm run r:build

，结果是esm和umd构建正常（尽管抱怨了vuetify的循环依赖），对于

unpkg

（创建

.min.js

），我得到了

[！]类型错误：无法读取未定义的属性“长度”

其中

类型错误：无法读取未定义的属性“长度”：at~/Projects/valpha/node_modules/rollup/dist/rollup.js:14802:55

似乎不需要

.min

。。。所以你的解决方案是有效的（虽然如果你能找出

.min

我相信这将是一个更全面的答案。此外，可能值得为那些在vuetify^^之上构建组件添加一个特定的文档页面。还有一个后续问题，在使用vuetify的nuxt项目中，

vskeletonloader

不会在生产中显示，但所有其他组件有。这是否与树上运动有关？尽管有其他渲染功能？这可能来自2017年以来未更新的

rollup plugin uglify es

，您应该改用terser。我不知道生产中没有显示vkeletonloader，可能与SSR有关。如果禁用静默模式，您将获得更多信息。