如何将 npm 包的静态资产发送到 nuxt 应用程序？

Question

我正在尝试将资产从 npm 包发送到 nuxt 应用程序。有人成功过吗？

我有一个 vue 组件作为 npm 包，结构如下：

-src/
 -assets/
  -noun-filter.svg

此矢量图像这样加载到此 npm 包中的 vue 组件模板中：

<img class="filter-icon" :src="require('../assets/noun-filter.svg')"/>

上面的方法在单独测试这个包时工作正常。

然而，当我像这样在 nuxt 应用程序中导入 npm 包时：

<script>
export default {
  name: "NuxtMainPage",
  components: {
    NpmImportedComponent: process.client
      ? () => import("@myname/mynpmpackage").then(m => m.Content)
      : null
  },
//...
}
</script>

当我运行应用程序时，我得到 404 的 svg。

Nuxt 在 http://localhost:3000/_nuxt/img/noun-filter.b16c5666.svg 中查找不存在的文件。

我在这里遗漏了什么吗？为什么nuxt会改变资产的路径？为什么它不像我们期望的那样只查看节点模块？

如何通过 npm 包将静态资源发送到 nuxt？

我试过的

尝试在我的应用中使用 url-loader。 Url 仍然在 nuxt
在 nuxt 应用程序中使用 import @myname/mypackage/src/assets/noun-filter.svg 导入项目
将 npm 包中的相对 url 从 ../assets 切换为 @assets
将assets文件夹移动到npm包的根目录，并将其添加到package.json

以上所有结果与 nuxt 在以下位置查找图像的结果相同： http://localhost:3000/_nuxt/img/noun-filter.b16c5666.svg

Answer 1

将您的资产放在独立目录中 static 并在您的包的 tsconfig.json 中将 static 目录包含到 rootDirs 字段中，如下例

{
    ...
    "compilerOptions": {
        ...
        "rootDirs": [
            "src",
            "static",
            ...
        ]
        ...
    }
    ...
}

并重新发布您的包，静态文件也将可用

Answer 2

我认为这里没有简单的解决方案。

第一个解决方案，使用 url-loader 将您的资产文件内联为 base-64 数据 url。参见 Asset URL Handling。

vue.config.js

...
  chainWebpack: config => {
    config.module
      .rule('images')
        .use('url-loader')
          .loader('url-loader')
          .tap(options => Object.assign(options, { limit: 10240 })) // default is 4096
  }
...

From Relative Path Imports

第二种解决方案，将您的资产文件复制到 static 目录并改用绝对 url。

如何将 npm 包的静态资产发送到 nuxt 应用程序？

How to send a npm package's static assets to a nuxt application?

javascript

vue.js

nuxt.js

npm-package

我试过的