Nuxt 内容 + Vuetify 组件 = 如何删除模板页面中将呈现降价内容的导入块

Question

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

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

主要讨论在issue #221内部。

据我所知，很快： Vuetify 加载器不检查 markdown 文件的内容，这就是为什么在运行 nuxt generate Vuetify 组件（可以在任何没有导入的组件中使用）在 markdown 文件中使用时不会呈现的原因。 在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 运行它，当我访问显示带有 Vuetify 组件的降价页面时，我会收到错误 Unexpected token 'export'。

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

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

Answer 1

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

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

顺便说一句。链接a href="/my-file.zip"或其markdown对应[Link](/my-file.zip)，如果用于从同一页面下载文件，则会在我的nuxt + vuetify中抛出404页面未找到。将其包裹在my-markdown-link 中后，它又可以工作了。

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

以上只提供了一种方式绑定。如果您需要从包装器中监视事件，请参考以下答案。
https://stackoverflow.com/a/64824575