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

Posted 2023-02-23

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

【英文标题】：Component mounted but template tags not rendered in production environment (but rendered in development): Nuxtjs Vuejs Vuetifyjs Rollupjs

【发布时间】：2020-03-25 05:19:05

【问题描述】：

概要

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

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

是什么激发了这篇文章的灵感： 1. 在组件的仓库 GitLab 页面上（上面的第 5 步），组件被渲染和挂载 2. 在测试存储库 GitLab 页面上（上面的第 9 步），组件已挂载，但未呈现模板（例如，它就像它的模板标签 <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>

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

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

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

链接

组件仓库：

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 有什么问题吗？

【参考方案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 中导入所需的组件（见下文）和 在 test-valpha 中始终使用 vuetify-loader by setting treeShake to true

或

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

导入组件

如果库使用 webpack，你只需要安装 vuetify-loader，但汇总没有类似的东西，所以你需要手动添加它们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>

【讨论】：

第一次谢谢。每当我开始认为我开始知道自己在做什么时，事实证明我不知道：p 因为我仍在学习，请您提供对 valpha 配置的更改以及如何设置 treeshaking？我曾尝试在 nuxt 中使用 vuetify a la carte，但总是搞砸并挣扎。如果你这样做，我会增加赏金并奖励你

所以我添加了相关组件并在 valpha 中尝试了 npm run r:build，结果是 esm 和 umd 构建正常（尽管抱怨来自 vuetify 的循环依赖）和 unpkg（创建 @987654331 @) 我得到[!] TypeError: Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined: at ~/Projects/valpha/node_modules/rollup/dist/rollup.js:14802:55

好吧，似乎不需要.min...所以您的解决方案有效（尽管如果您能弄清楚.min，我相信这将是一个更全面的答案。此外，它可能值得为 vuetify 之上的那些构建组件添加一个特定的文档页面 ^^.

另一个后续问题，在使用 vuetify 的 nuxt 项目中，vskeletonloader 不会在生产中显示，但所有其他组件都会显示。这与treeshaking有关吗？尽管其他一切都在渲染？

这可能来自rollup-plugin-uglify-es，它自 2017 年以来就没有更新过，你应该改用 terser。 > vskeletonloader 在生产中没有显示我不知道，可能与 s-s-r 有关。如果您禁用静音模式，您将获得更多信息。