NuxtJS在mixin中导入组件报ts(2307)找不到模块错误如何解决？

报错Cannot find module '~/components/Common/AppAlert' or its corresponding type declarations.ts(2307)的中文含义为：无法找到模块 '~/components/Common/AppAlert' 或其对应的类型声明，本质是TypeScript无法识别对应导入路径的文件，可按以下优先级尝试修复：

• 方法1：补全.vue后缀导入
  Nuxt运行时支持省略.vue后缀导入组件，但TS静态校验需要显式补全后缀，修改导入语句即可：

import AppAlert from '~/components/Common/AppAlert.vue'

• 方法2：补全TS配置
  如果不想每次写.vue后缀，先检查根目录tsconfig.json的路径别名配置是否正确，示例配置如下：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    }
  }
}

再检查根目录是否有shims-vue.d.ts类型声明文件，没有就新建一个，内容如下：

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

修改完配置后重启TS服务即可生效。

• 方法3：使用Nuxt自动导入特性
  Nuxt默认开启components目录组件自动导入，你可以完全删掉手动导入语句，直接传组件名字符串即可：

import { Component } from 'nuxt-property-decorator'
@Component
export class LogOut extends Vue {
  async LogOut() {
    const confirm = await this.$dialog.show({
      component: 'AppAlert',
      props: {
        title: { text: 'Exit ?', icon: 'exclamation-thick' },
        body: 'Exit Connector ?',
        btn: { text: 'Confirm', icon: 'power', color: 'error' }
      }
    })
    if (confirm) {
      this.$auth.logout()
    }
  }
}

• 临时修复方案
  如果以上配置都正确仍有报错，可在导入语句上方加TS忽略注释：

// @ts-ignore
import AppAlert from '~/components/Common/AppAlert'

内容的提问来源于stack exchange，提问作者morteza mortezaie