1

在我的“个人页面”项目中，我使用的是 NuxtJS，它的@nuxt/content内容模块和 Vuetify UI 框架。

最近发现一个问题：在markdown文件里面的Vuetify组件在生成静态站点时没有渲染，但是在开发模式下运行项目时可以正确渲染。我检查了@nuxt/content中关于这个问题的问题，发现了 2 个问题：#221和#700

主要讨论在issue #221内。

不久，我从问题中了解到：Vuetify 加载程序不检查降价文件的内容，这就是为什么在运行nuxt generateVuetify 组件时（可以在没有导入的任何组件中使用）在降价文件中使用时不会呈现。在nuxt dev模式下 Vuetify 组件被正确渲染，因为 treeshake 在开发模式下被禁用

在 markdown 文件中，我只使用了一个组件 - <v-alert>，所以最后的解决方案是下一个：

import Vue from 'vue'
import { VAlert } from 'vuetify/lib'
Vue.component('VAlert', VAlert)

我需要在显示降价文件内容的页面上使用此代码。有了它，nuxt generate结果就是我想要的 - 如果在 Markdown 文件中使用，Vuetify 组件将成功呈现。

但是这段代码也带来了一个问题：如果我使用它运行它，当nuxt dev我Unexpected token 'export'访问显示带有 Vuetify 组件的降价页面时会出错。

最后的问题是：如何使用模板从页面中删除这些导入以显示降价内容？可能类似于“条件导入”（使这些导入仅在运行时执行nuxt generate）或其他什么？

当然，每次我在开发模式下运行项目时，我都可以评论/取消评论，但我不确定这是正确的方式。

4

1 回答 1

1

我已经在我自己的版本中包装了我在 Markdown 中使用的每个 vuetify 组件。

// my-markdown-alert.vue
<template>
  <v-alert v-bind="$attrs"><slot></slot></v-alert>
</template>

顺便提一句。如果用于从同一页面下载文件的链接a href="/my-file.zip"或其降价对应项，则会在我的 nuxt + vuetify 中抛出 404 page not found 。[Link](/my-file.zip)将其包裹后my-markdown-link，它再次工作。

<a v-bind="$attrs"><slot></slot></a>

以上仅提供单向绑定。如果您需要监视包装器中的事件，请参阅以下答案。
https://stackoverflow.com/a/64824575

于 2021-04-28T04:24:32.710 回答