导入*.svg模块引发Typescript错误："找不到模块..."

Question

这是一个使用 @vue/cli 制作的 Web 应用。

我想使用 vue-svg-loader 将内联 SVG 加载为 Vue 组件。

根据 vue-svg-loader 的安装指南，我在 vue.config.js 中添加了以下代码：

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};

我需要导入我的Svg文件，使用import ViwanMap from '@/assets/ViwanMap.svg';。

此外，我在src/文件夹中创建了一个shims-svg.d.ts，其中包含：

import { VNode } from 'vue';
declare global {
  type Svg = VNode; // With vue-svg-loader, imported svg is a Vue component.
}

declare module '*.svg' {
  const content: Svg;
  export default content;
}

此外，这是我的tsconfig.js文件:

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

编译过程会引发以下错误：

ERROR in <MY_PROJECT_ROOT>/src/views/Home.vue
12:22 Cannot find module '@/assets/ViwanMap.svg'.

然而，webpack进程似乎是正常工作的，因为svg出现在我的应用程序中。它似乎只是一个typescript问题。你知道问题出在哪里吗？ 谢谢:)

- Thaledric

Answer 1

Harshal Patil的答案有效，但我使用了这里的内容：官方文档

declare module '*.svg' {
  import Vue, {VueConstructor} from 'vue';
  const content: VueConstructor<Vue>;
  export default content;
}

- Edgar Quintero

---

我把它放在shims-svg.d.ts里，运行得很好。 - undefined

我只能在node ^17上使其正常工作。LTS v16.5会导致失败。 - undefined

Answer 2

您只需要对模块声明进行小的调整，以适应.svg文件。您的shims-svg.d.ts文件应该如下：

declare module '*.svg' {

    import { VNode } from 'vue';

    // DON'T DECLARE THIS INSIDE GLOBAL MODULE
    type Svg = VNode;

    const content: Svg;
    export default content;
}

请注意，全局范围的扩展只能直接嵌套在外部模块或环境模块声明中。

- Harshal Patil

---

没关系 :) 顺便说一下，我混淆了VNode和Vue类。使用vue-svg-loader导入的svg是一个Vue类，而不是VNode（Vue的实例）。 - undefined

我使用https://github.com/visualfanatic/vue-svg-loader/blob/master/docs/faq.md#how-to-use-this-loader-with-typescript - undefined