这是一个使用 @vue/cli
制作的网络应用程序。
我想使用 vue-svg-loader
加载内联 Svg 作为 vue 组件。
作为vue-svg-loader installation guide说,我把这段代码放在 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');
},
};
并使用 import ViwanMap from '@/assets/ViwanMap.svg'; 导入我的 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 问题。你知道问题出在哪里吗? 谢谢:)
最佳答案
Harshal Patil 的回答有效,除了我使用这里的内容:Official Documentation
declare module '*.svg' {
import Vue, {VueConstructor} from 'vue';
const content: VueConstructor<Vue>;
export default content;
}
关于typescript - 导入 *.svg 模块引发 Typescript 错误 : "Cannot find module ...",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53937634/
相关文章:
nuxt.js - Nuxt : Difference nuxtServerInit vs Mddl
visual-studio-code - VS Code 安装 Visual Studio Code
vue.js - 无法使用 vue-html2pdf 将 HTML 代码转换为 PDF
list - 我怎样才能找到一个列表包含在任何元素中的另一个列表?
python - 如何将三个列表转换为字典,其中键取自前两个列表的笛卡尔积,值取自第三个列表
java - PaseclCase 字符串转大写,下划线分隔