Nuxt v.3.11 - 如何导入 `github/relative-time-element`？

Question

我在尝试将

github/relative-time-element

与 Nuxt 3.11.2 和 Nitro 2.9.6 一起使用时遇到问题。

这是我到目前为止所做的：

• 我使用以下方式安装了库：

  $ npm install @github/time-elements.

• 我配置了 nuxt.config.ts 如下：

export default defineNuxtConfig({
  ...
  vue: {
      compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('relative-time')
      }
  },
  ...
})

• 我还尝试创建一个简单的组件

  components/atom/TimeRelative.vue

  :

<script setup>
// TimeRelative.vue
import { ref, computed } from 'vue';
import { onMounted } from 'vue';
import '@github/time-elements/dist/relative-time-element.js';

onMounted(() => {
    
});

const props = defineProps({
    time: String,
    class: String
});

</script>
<template>
<ClientOnly>
<relative-time datetime="2014-04-01T16:30:00-08:00" tense="past" format="relative"  prefix="this happened on">
  April 1, 2014
</relative-time>
</ClientOnly>
</template>

这会导致错误，指出无法找到该包：（它存在）

 ERROR  Internal server error: Missing "./dist/relative-time-element.js" specifier in "@github/time-elements" package                           3:49:06 PM
  Plugin: vite:import-analysis
  File: /.../components/atoms/TimeRelative.vue

• 如果我尝试使用以下方式导入文件：

import '~/node_module/@github/time-elements/dist/relative-time-element.js';

它不会抛出错误，但也不会执行任何操作 - HTML 的渲染就像组件根本没有被转换一样。

将此包包含在 Nuxt 3 中的正确方法是什么？

谢谢！

Answer 1

node_modules/@github

文件夹包含

relative-time-element

文件夹，所以正确的导入是：

import '@github/relative-time-element';

我检查过 - 它有效。