Javascript 如何发送npm包'；将静态资产添加到nuxt应用程序？

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

导出默认值{
名称：“NuxtMainPage”，
组成部分：{
NPMIImportedComponent:process.client
？（）=>import（“@myname/mynpmpackage”）。然后（m=>m.Content）
：null
},
//...
}

当我运行该应用程序时，svg会得到一个404

Nuxt在

http://localhost:3000/_nuxt/img/noun-filter.b16c5666.svg

不存在的位置

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

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

我试过的

• 尝试在我的应用程序中使用url加载程序。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

将您的资产放在独立目录

static

中，并在包的

tsconfig.json

中将

static

目录包含到

rootDirs

字段中，如以下示例所示

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

---

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

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

第一种解决方案是，使用

url加载器

将资产文件内联为base-64数据url。看

vue.config.js

。。。
链接网页包：配置=>{
config.module
.rule（'图像'）
.use（'url-loader'）
.loader（'url-loader'）
.tap（options=>Object.assign（options，{limit:10240}））//默认值为4096
}
...

从

第二种解决方案是，将资产文件复制到

静态

目录，并改用绝对url

---

.

对于那些认为这个答案和其他答案都不起作用的人，请使用

在组件模板中

在vue.config.js中

/。。。
config.module
.rule（'vue'）
.use（“vue svg内联加载程序”）
.loader（“vue svg内联加载程序”）
//...   

---

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

谢谢您的帮助！我试过了，但不幸的是没有成功。我的npm软件包中没有使用typescipt，所以可能没有使用tsconfig.json？你应该将你的软件包迁移到ts。它功能强大，易于其他开发人员使用，因为它提供了额外的声明文件。在你的情况下，你可以在发布之前手动将这些文件添加到你的软件包中。我刚刚检查过，tsconfig.json和/static中的所有文件都在那里，我的nuxt应用程序仍然找不到them@JesseRezaKhorasanee看看这个=>谢谢@User 28的帮助！我只是尝试了上面的方法，然后切换到绝对URL，不幸的是这两种方法都不起作用。我开始怀疑是async

process.client导入，并将在下一步尝试测试。对于第一个解决方案，请确保您的文件大小不超过限制。然后在运行build之后，您将不会看到
img
目录。你必须在组件上运行build，而不是你的应用程序。使用其他npm包时也是如此。对于第二个解决方案，
./assets
和
@assets
不是绝对路径。如果使用vue cli，则必须将该资产文件放入公共目录，然后作为
/icon.svg
使用，然后进行构建，此网页包将不会使用此绝对路径。将该公用文件复制到nuxt中的
静态
目录下的应用程序中。@JesseRezaKhorasanee