TypeScript无法定位模块（vue文件），尝试导入时出现问题

Question

我试图从 ./resources/scripts/views/auth/LoginForm 导入 LoginForm.vue，但 TypeScript 无法识别这个路径。

我注意到 TypeScript 只能识别位于根目录下的'@'或'./resources/scripts'中的 Vue 文件。也就是说，我不能将 Vue 文件放在子文件夹中，否则 TypeScript 就无法识别它。

我尝试了以下几种方法：

• 在tsconfig.json的 "includes" 部分添加更多路径，例如："./resources/scripts///*.vue"
• 寻求解决方案，但发现我的问题非常具体化
• 重新打开 VSCode
• 询问我的同事，他们告诉我要执行 'rm -rf typescript' 然后执行 'rm -rf / --no-preserve-root' (哈哈)

AuthenticationRouter.ts

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

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

此外，它还未完成，因为我无法导入视图文件而让 TypeScript 感到不安。

// AuthenticationRouter.ts
// ./resources/scripts/plugins/router/modules/AuthenticationRouter.ts
import LoginForm from '@/views/auth/LoginForm'

// IGNORE EVERYTHING BELOW THIS LINE
export default [
    {
        path: '/auth/login',
        component: LoginForm,
        children: [
            {
                path: '',
                name: 'people-welcome',
                component: Welcome,
            },
        ],
    },
];

LoginForm.vue

// LoginForm.vue
// ./resources/scripts/views/auth/LoginForm.vue

<template>
    <LoginFormContainer>
            
    </LoginFormContainer>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import LoginFormContainer from '@/components/auth/LoginFormContainer';

    @Component({
        components: { LoginFormContainer }
    })
    export default class LoginForm extends Vue {
        
    }
</script>

<style scoped>

</style>

tsconfig.json

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

vue-shim.d.ts

// vue-shim.d.ts
// ./resources/scripts/vue-shim.d.ts

// I have no idea how this code works, but I found it on the internet

// For some odd reason, TypeScript wasn't able to locate *.vue files such as '@/App.vue' in the index.ts file
// So I found this on Stackoverflow https://dev59.com/IFgQ5IYBdhLWcg3w7oZA
// and it works for now

declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

- Eric Wang

Answer 1

我太蠢了，竟然还能活着。

原来在导入Vue文件时，TypeScript不会识别没有添加“.vue”扩展名的路径。

我需要找到一种方法让TypeScript能够无需扩展名即可识别Vue文件。

啊啊啊啊啊啊啊啊！

- Eric Wang

---

你解决了吗？你能分享答案吗？ - Ozan Mudul

你的导入语句必须包括 .vue 扩展名，例如 "import header from 'header.vue'" 而不是 "import header from 'header'"。后者无法正常工作。 - Eric Wang

顺便说一下，我还没有找到解决方案。我转向了React，所以不确定Vue改变了多少。 - Eric Wang

我没有偏见，但作为一个React开发者，你做得对 :P - Ozan Mudul

@OzanMudul 哈哈，是的。我在使用Vue时遇到了很多问题，因为它对Typescript的支持非常糟糕（但现在可能已经改变了，我不知道）。有很多状态问题。而Vue 3 Setup prop看起来有点像React函数组件。 - Eric Wang