尝试导入时 TypeScript 无法找到模块（vue 文件）

Question

我正在尝试从./resources/scripts/views/auth/LoginForm导入LoginForm.vue \n但 TypeScript 无法\xe2\x80\x99t 识别该路径。

\n

我注意到 TypeScript 无法识别不在\'@\'或\'./resources/scripts\'根目录中的 Vue文件 \n这意味着我无法将 Vue 文件放入子文件夹中，而 TypeScript 无法识别它。

\n

我试过

\n

\n
• 在tsconfig.json的“includes”部分添加更多路径，例如“./resources/scripts/ / /*.vue”
\n
• 寻找解决方案，但发现我的问题非常具体
\n
• 重新打开 VSCode
\n
• 问我的同事他们告诉我“rm -rf typescript”然后“rm -rf / --no-preserve-root”（哈哈）
\n

\n

身份验证路由器.ts

\n

AuthenticationRouter.ts 是导入到主路由器文件中的模块。

\n

该模块位于\'./resources/scripts/plugins/router/modules/AuthenticationRouter.ts\'

\n

另外，它还没有完成，因为我无法在 TypeScript 不发出嘶嘶声的情况下导入视图文件。

\n

// AuthenticationRouter.ts\n// ./resources/scripts/plugins/router/modules/AuthenticationRouter.ts\nimport LoginForm from \'@/views/auth/LoginForm\'\n\n// IGNORE EVERYTHING BELOW THIS LINE\nexport default [\n    {\n        path: \'/auth/login\',\n        component: LoginForm,\n        children: [\n            {\n                path: \'\',\n                name: \'people-welcome\',\n                component: Welcome,\n            },\n        ],\n    },\n];\n

\n

登录表单.vue

\n

// LoginForm.vue\n// ./resources/scripts/views/auth/LoginForm.vue\n\n<template>\n    <LoginFormContainer>\n            \n    </LoginFormContainer>\n</template>\n\n<script lang="ts">\n    import { Component, Vue } from \'vue-property-decorator\';\n    import LoginFormContainer from \'@/components/auth/LoginFormContainer\';\n\n    @Component({\n        components: { LoginFormContainer }\n    })\n    export default class LoginForm extends Vue {\n        \n    }\n</script>\n\n<style scoped>\n\n</style>\n

\n

tsconfig.json

\n

// tsconfig.json\n// ./tsconfig.json\n{\n  "compilerOptions": {\n    "target": "es5",\n    "module": "es2015",\n    "strict": true,\n    "jsx": "preserve",\n    "importHelpers": true,\n    "moduleResolution": "node",\n    "skipLibCheck": true,\n    "esModuleInterop": true,\n    "sourceMap": true,\n    "allowSyntheticDefaultImports": true,\n    "baseUrl": ".",\n    "emitDecoratorMetadata": true,\n    "experimentalDecorators": true,\n    "rootDir": "./resources/scripts/",\n    "paths": {\n      "@/*": [\n        "./resources/scripts/*"\n      ]\n    },\n    "typeRoots": [\n      "node_modules/@types",\n      "./node_modules/vuetify/types"\n    ],\n    "lib": [\n      "esnext",\n      "dom",\n      "dom.iterable",\n      "scripthost"\n    ]\n  },\n  "include": [\n    "./resources/scripts/**/*",\n    "./resources/scripts/**/*.ts",\n    "./resources/scripts/**/*.vue",\n    "./resources/scripts/**/*.tsx",\n  ],\n  "exclude": [\n    "/node_modules/"\n  ]\n}\n

\n

vue-shim.d.ts

\n

// vue-shim.d.ts\n// ./resources/scripts/vue-shim.d.ts\n\n// I have no idea how this code works, but I found it on the internet\n\n// For some odd reason, TypeScript wasn\'t able to locate *.vue files such as \'@/App.vue\' in the index.ts file\n// So I found this on Stackoverflow https://stackoverflow.com/questions/42002394/importing-vue-components-in-typescript-file\n// and it works for now\n\ndeclare module "*.vue" {\n    import Vue from \'vue\'\n    export default Vue\n}\n

\n

Answer 1

我太蠢了，还活着。

事实证明，导入时如果不在路径中添加“.vue”扩展名，TypeScript 将无法识别 Vue 文件。

我需要找到一种方法让 TypeScript 识别没有扩展名的 Vue 文件。

啊啊啊啊啊啊