找不到模块“@/assets/<file-name-here>.svg”。 @vue/cli 版本：4.2.3 和 4.3.1

Question

将军：

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，但是运行遇到了同样的问题。

我已经检查过该文件在资产中。我检查过文件名拼写是否正确。我觉得这是一个 webpack 问题，因为 require() 在使用打字稿调用时不起作用。我已尝试创建 vue.config.js 并手动设置资产的路径。

项目设置配置：

特性：Babel、TS、路由器、ESLint
不是 class 风格的语法
Babel 与 Typescript 一起使用
路由器没有历史记录模式
eslint 仅具有错误预防功能
保存时 Lint
配置位于 package.json。

错误 Component.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"
  ]
}

我做错了什么？提前致谢！

Answer 1

请记住这一点，这个答案不是解决方案，而更像是 这个问题的解决方法 到这个问题 asked/answered对于 vue-svg-loader(@vue/cli 版本：4.2.3 和 4.3.1).

导入.vue组件时可以使用绝对路径代替@引用文件。这是一个例子：

而不是这个：

在 GitHub 上阅读有关此问题的更多信息以及此问题的官方存储库中任何可能的解决方案： Typescript 找不到模块 '@/assets/svg/register.svg?inline' #92

Answer 2

Typescript 不支持 svg 文件。使用以下内容在项目源文件夹中创建一个 svg.d.ts 文件：

declare module '*.svg';

并重新启动您的编辑器

找不到模块“@/assets/<file-name-here>.svg”。 @vue/cli 版本：4.2.3 和 4.3.1

Cannot find module '@/assets/<file-name-here>.svg'. @vue/cli Version: 4.2.3 and 4.3.1

vue.js

webpack

import

command-line-interface

assets

将军：

项目设置配置：

错误 Component.vue

打字稿配置