如何使用 npm link 在 vuejs 模块中修复 'Cannot find module'

Question

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

效果很好。

但是在同一个库中，我有另一个组件使用 svg-icon 和存储在库中的 svg 图像。

一个导入点，我想将这个库（节点模块）与 npm link

一起使用

给svg图片的路径，或者放在哪里比较好？

我尝试了很多不同的路径，但其中 none 行得通...

这是我的 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 文件放在别的地方吗？（我想把它放在图书馆里）

Answer 1

我创建了一个 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>

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

您需要导入图像并将其传递给您的组件，因为动态导入会导致绝对路径复杂化。
我已经从您的 SvgIcon 代码中删除了一些不必要的字段。

希望这对您有所帮助。

如何使用 npm link 在 vuejs 模块中修复 'Cannot find module'

How to fix 'Cannot find module' in a vuejs module with npm link

webpack

vue.js

npm-link