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

Question

bounty到期在7天内。这个问题的答案有资格获得+ 50声望赏金。SumNeuron要奖励现有答案：请解决`.min`汇总问题

Synonypsis

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

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

发生了什么事，启发了这篇文章：1.在组件的存储库GitLab页面（上面的第5步）上，将同时渲染和安装组件2.在测试存储库GitLab页面（上面的第9步）上，该组件为mount，但未渲染模板（例如，类似于其模板标签<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>

这是来自链接的测试存储库的以下图片，显示了我的意思：

注意，该组件的所有位置都装有数据，但是与所有其他组件不同，它没有下拉菜单可以看到内部组件。

我不确定我哪里出错了，除了诸如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
链接

• component repo：

  • 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

测试仓库

• VRecordsTable
• gitlab page of the test repo

午餐

• test repo与npm run start的关系/问题是如何构建的？

与我如何配置rollup.config.js有关的问题？

问题出在什么地方？

Synonypsis，请允许我解释发生了什么。我做了以下工作：使用Vuetify组件制作了自定义Vue组件使用这些Vuetify组件制作了一个自定义Vue组件，并且...

Answer 1

npm run dev