2

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

它工作得很好。

但是在同一个库中，我有另一个组件，它使用 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 文件放在别的地方吗？（我想把它放在图书馆里）

4

1 回答 1

1

我在这里创建了一个 CodeSandbox

SVGIcon.vue

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

你好世界.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代码中删除了一些不必要的字段。

希望这可以帮助。

于 2019-04-25T13:14:45.683 回答