如何使用npm链接修复vuejs模块中的“无法找到模块”

时间:2019-04-25 12:18:38

标签: vue.js webpack npm-link

我创建了一个vuejs库,其中包含一些可以在许多项目中使用的组件。 在该库中,我有一个组件可以加载要在html(svg-icon)中内联使用的svg文件。

效果很好。

但是在同一个库中,我还有另一个组件,该组件使用svg-icon以及存储在库中的svg图像。

导入点,我想将此库(节点模块)与npm链接一起使用

哪种方法可以提供svg图像的路径,或将其存储在哪里?

我尝试了许多不同的路径,但是没有一个起作用...

这是我的svg-icon组件:

<template>
   <component :is="component"></component>
</template>

<script>
 export default {
   name: 'SvgIcon',
   props: {
     icon: {
       type: String,
       required: true
     }
   },
   data () {
     return {
       component: null
     }
   },
   watch: {
     icon: () => {
       this.load()
     }
   },
   computed: {
     loader () {
       return () => import(this.icon)
     }
   },
   methods: {
     load () {
       this.loader().then(() => {
         this.component = () => this.loader()
       })
     }
   },
   mounted () {
     this.load()
   }
 }
</script>

这是使用svg-icon的组件(svg图像实际上位于同一文件夹中):

<template>
   <svg-icon icon="~my-module/components/media/no-image.svg"></svg-icon>
   <svg-icon icon="./no-image.svg"></svg-icon>
</template>
<script>
import SvgIcon from '../svg-icon/SvgIcon'

export default {
  components: {
    SvgIcon
  }
}
</script>

我总是遇到这个错误:

Cannot find module '~my-module/components/media/no-image.svg'

Cannot find module './no-image.svg'

在这种情况下,哪条路是好的?还是应该将svg文件放在其他位置? (我想把它保存在图书馆里)

1 个答案:

答案 0 :(得分:0)

我已经创建了一个CodeSandbox here

SvgIcon.vue

<template>
  <span v-html="icon"></span>
</template>
<script>
export default {
  name: "SvgIcon",
  props: {
    icon: {
      type: String,
      required: true
    }
  }
};
</script>


HelloWorld.vue

//Usage
<template>
  <svg-icon :icon="AlertIcon"></svg-icon>
</template>
<script>
import AlertIcon from "../assets/alert.svg";
import SvgIcon from "./SvgIcon";

export default {
  data() {
    return { AlertIcon };
  },
  components: {
    SvgIcon
  }
};
</script>

我对您的组件进行了一些更改。

  1. 您需要导入图像并将其传递到组件,因为动态导入涉及绝对路径时会带来复杂性。
  2. 我已从您的SvgIcon代码中删除了一些不必要的字段。

希望这会有所帮助。