2

我正在尝试将资产从 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>

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

http://localhost:3000/_nuxt/img/noun-filter.b16c5666.svgNuxt在它不存在的地方寻找文件。

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

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

我试过的

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

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

4

3 回答 3

1

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

第一个解决方案，用于url-loader将您的资产文件内联为 base-64 数据 url。请参阅资产 URL 处理。

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
  }
...

从相对路径导入

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

相关帖子。

于 2020-10-13T09:56:08.270 回答
1

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

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

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

于 2020-10-12T23:03:38.553 回答
0

对于那些发现此问题且其他答案均无效的人，请使用vue-svg-inline-loader.

在您的组件模板中

<img svg-inline src="'@/../assets/noun-filter.svg'"/>

在vue.config.js中

//...
      config.module
        .rule('vue')
        .use("vue-svg-inline-loader")
        .loader("vue-svg-inline-loader") 
//...

非常无痛，对我来说效果很好。它的缺点是您的 svg 最终会与您的包捆绑在一起，但 url-loaders 也会这样做

于 2020-11-02T22:08:11.533 回答