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

Question

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

最近发现一个问题：markdown文件中的Vuetify组件在生成静态站点时不渲染，但是在运行ning项目在开发模式下渲染正确。我检查了 @nuxt/content about this problem and found 2 issues: #221 and #700

中的问题

主要讨论在issue #221里面。

据我从问题中了解到： Vuetify 加载器不检查 markdown 文件的内容，这就是为什么运行ning nuxt generate Vuetify 组件（可以在任何组件中使用而无需导入）在 markdown 文件中使用时不会呈现的原因。在 nuxt dev 模式下，Vuetify 组件可以正确呈现，因为开发模式

禁用了 treeshake

在降价文件中我只使用了一个组件 - <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'。

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

当然我可以 comment/uncomment 每次我运行在开发模式下项目，但我不确定这是正确的方法。

Answer 1

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

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

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

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

以上仅提供一种绑定方式。如果您需要从包装器中监视事件，请参考以下答案。

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

Nuxt Content + Vuetify components = how to remove block of imports in template page which will render markdown content

nuxt.js

vuetify.js

nuxt-content