为什么 ny Nuxt 模块可以在本地工作，但当我从 NPM 导入它时却不能工作？

Question

我制作了一个 Nuxt 3 模块，其中包含一些组件、样式表和图像。

我已将其添加到目标应用程序的 package.json 中的模块数组中：

  modules: ['@zadigetvoltaire/nuxt-gtm', 'cec-vue-lib'],

它可以“本地”工作，例如。当我通过节点模块文件夹中的符号链接访问它时，但是当我将其发布到 npm 并尝试包含它时，找不到图像：

Pre-transform error: Failed to resolve import "cec-logo-colour-155x70px.png" from "node_modules/cec-vue-lib/dist/runtime/components/cecHeader.vue". Does the file exist?

我尝试了一些方法，但总是遇到错误，包括未定义“onMounted”之类的内容（我的组件之一在其脚本设置标签中包含此内容）。

我已按照 Nuxt 3 文档中的说明进行操作并观看了一些视频，但我不明白出了什么问题。

npm 包是“cec-vue-lib”，module.ts 文件如下：

import { defineNuxtModule, addPlugin, createResolver, addComponentsDir } from '@nuxt/kit';

// Module options TypeScript interface definition
export interface ModuleOptions {}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'cec-vue-lib',
    configKey: 'cec-vue-lib'
  },
  // Default configuration options of the Nuxt module
  defaults: {},
  setup (options, nuxt) {
    const resolver = createResolver(import.meta.url);

    // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
    addPlugin(resolver.resolve('./runtime/plugin'))
    addComponentsDir({
      path: resolver.resolve('./runtime/components')
    });

    nuxt.options.css.push(resolver.resolve('./runtime/assets/style.css'))
    nuxt.hook('nitro:config', async (nitroConfig) => {
      nitroConfig.publicAssets ||= []
      nitroConfig.publicAssets.push({
        dir: resolver.resolve('./runtime/public'),
        maxAge: 60 * 60 * 24 * 365 // 1 year
      })
    });
  }})

这是模块中我的package.json，我想知道“exports”位是否错误。任何帮助表示赞赏:)

{
  "name": "cec-vue-lib",
  "version": "1.0.5",
  "description": "Nuxt components and assets",
  "license": "MIT",
  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/types.d.ts",
      "import": "./dist/module.mjs",
      "require": "./dist/module.cjs"
    }
  },
  "main": "./dist/module.cjs",
  "types": "./dist/types.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "prepack": "nuxt-module-build build",
    "dev": "nuxi dev playground",
    "dev:build": "nuxi build playground",
    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
    "lint": "eslint .",
    "test": "vitest run",
    "test:watch": "vitest watch",
    "link": "npm link"
  },
  "dependencies": {
    "@nuxt/kit": "^3.11.2"
  },
  "devDependencies": {
    "@types/node": "^20.12.4",
    "@nuxt/devtools": "latest",
    "@nuxt/eslint-config": "^0.2.0",
    "@nuxt/module-builder": "^0.5.5",
    "@nuxt/schema": "^3.11.2",
    "@nuxt/test-utils": "^3.12.0",
    "changelogen": "^0.5.5",
    "eslint": "^8.57.0",
    "nuxt": "^3.11.2",
    "vitest": "^1.4.0"
  }
}

Answer 1

我通过在我的组件中显式导入 onMounted、useState 等来完成这项工作。仍然无法使图像正常工作，但这不是一个大问题。