Не удается найти модуль '@ / assets / .svg». @ vue / cli Версия: 4.2.3 и 4.3.1 - PullRequest
Новая
       26

Не удается найти модуль '@ / assets / .svg». @ vue / cli Версия: 4.2.3 и 4.3.1

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

Общий jist: 

import Image from '@/assets/default-profile-picture.svg'
//ERROR: Cannot find module '@/assets/default-profile-picture.svg'.Vetur(2307)

Я потратил лучшую часть сегодняшнего дня, пытаясь найти решение этой проблемы. Я знаю, что есть много других постов, подобных этой, но все они устарели (более года назад).

Я только что сгенерировал чистое приложение Vue CLI и все еще имею то же самое проблема.

Я использую Vue CLI версии 4.2.3 и только что попытался использовать Vue CLI версии 4.3.1, но столкнулся с той же проблемой.

Я проверил что файл находится в активах. Я проверил, что имя файла написано правильно. У меня такое ощущение, что это проблема веб-пакета, так как require () не будет работать при вызове с использованием машинописного текста. Я попытался создать vue.config.js и вручную установить путь для активов.

Конфигурация настройки проекта:

  1. Особенности: Babel, TS, Маршрутизатор, ESLint
  2. не синтаксис в стиле класса
  3. Вавилон используется вместе с Typescript
  4. Нет режима истории для маршрутизатора
  5. eslint только с предотвращением ошибок
  6. Lint при сохранении
  7. Конфиги помещены в пакет. json.

Ошибка в компоненте. vue

<script lang="ts">
import Vue from 'vue'

/* Cannot find module '@/assets/default-profile-picture.svg'.Vetur(2307) */
import Image from '@/assets/default-profile-picture.svg'

export default Vue.extend({
  components: {
  },
  props: [
    'employeeImage',
    'employeeName',
    'employeeAge',
    'employeeSalary'
  ],
  data () {
    return {
      marked: false,
      result: [],
      name: this.employeeName,
      age: this.employeeAge,
      salary: this.employeeSalary
    }
  },
  computed: {
    compClasses: function () {
      return {
        marked: this.marked
      }
    },
    imageDefault: function () {
      if (this.employeeImage === '') {
        console.log('employee image empty: ' + this.employeeImage)
        return '@/assets/default-profile-picture.svg'
      } else {
        console.log('employee image set: ' + this.employeeImage)
        return this.employeeImage
      }
    }
  }
})
</script>

Типографская конфигурация 

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
        "paths": {
      "@/*": [
        "src/*"
      ]
        },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "/src/**/*.*",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Что я делаю неправильно? Заранее спасибо!

...