vue.js - 找不到模块 '@/assets/.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，但遇到了同样的问题。

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

项目设置配置:

1. 功能:Babel、TS、路由器、ESLint
2. 不是类风格的语法
3. Babel 与 Typescript 一起使用
4. 路由器没有历史记录模式
5. eslint 仅防错
6. 保存时 Lint
7. 配置放在 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>

typescript 配置

{
  "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

请记住这一点，这个答案不是一个解决方案，而更像是一个解决这个问题的方法，当这个问题被问到/回答 vue-svg-loader( @vue/cli 版本:4.2.3 和 4.3.1)。

当你想导入.vue组件时，你可以使用绝对路径而不是使用@来引用文件。这是一个例子:

取而代之的是:

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