Как исправить 'Cannot find module' в модуле vuejs с ссылкой на npm - PullRequest
Новая
       40

Как исправить 'Cannot find module' в модуле vuejs с ссылкой на npm

0 голосов
/ 25 апреля 2019

Я создал библиотеку 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 в другом месте?(Я хотел бы сохранить его в библиотеке)

1 Ответ

0 голосов
/ 25 апреля 2019

Я создал CodeSandbox здесь

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 код.

Надеюсь, это поможет.

...