gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 06:51:51 24 4
gpt4 key购买 nike

概要

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

  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>

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

enter image description here

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

我不确定我哪里出错了,在这篇文章的底部是组件和测试存储库的快速链接,以及像 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 run start的东西与 npm run dev/nuxt 是如何构建的问题?
  • 问题出在我配置 rollup.config.js 的方式上?
  • 问题出在 vuetify 上?

最佳答案

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问题中列出了一些解决方案:

或者

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

关于vuejs2 - 组件已安装,但模板标签未在生产环境中呈现(但在开发中呈现): Nuxtjs Vuejs Vuetifyjs Rollupjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59107674/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com