我正在尝试将资产从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？
import @myname/mypackage/src/assets/noun-filter.svg在nuxt应用中导入项目../assets切换到@assets上面所有内容在nuxt查找图像时都具有相同的结果： http://localhost:3000/_nuxt/img/noun-filter.b16c5666.svg
对于那些发现此问题却没有其他答案的人，请使用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会做同样的事情
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句