未找到 Nuxt export 'default'（作为 'mod' 导入）

Question

我正在使用 Nuxt 和 Typescript。我创建了以下组件：

<template>
    <div class="field">
        <label class="label" v-if="typeof label !== 'undefined'">{{ label }}</label>
        <div class="control">
            <textarea
                v-if="inputType === 'textarea'"
                class="textarea"
                @input="$emit('input', $event.target.value)"
            ></textarea>
            <input
                v-if="inputType === 'input'"
                :type="type"
                class="input"
                @input="$emit('input', $event.target.value)"
            >
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator"

@Component({})
export default class AppInput extends Vue {
    @Prop({ type: String, required: false, default: "input" })
    inputType!: string

    @Prop({ type: String, required: false })
    label!: string

    @Prop({ type: String, required: false, default: "text" })
    type!: string
}
</script>

<style>
</style>

然后在 中@/plugins/components.ts，我按如下方式导入组件：

import Vue from "vue"
import AppInput from "@/components/Forms/AppInput.vue"

Vue.component("AppInput", AppInput)

当我用 Nuxt 编译项目时，它抛出了我的export 'default' (imported as 'mod') was not found错误。请帮忙！

Answer 1

你的 vue 文件中至少需要一个空的导出默认脚本才能看到这个错误。如果您没有任何导出默认语句，则会出现此错误/警告。

export default {

}

Answer 2

我使用以下 tsconfig 解决了：

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "lib": ["esnext", "esnext.asynciterable", "dom"],
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "allowJs": true,
        "sourceMap": true,
        "strict": false,
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": false,
        "noEmit": true,
        "baseUrl": ".",
        "resolveJsonModule": true,
        "paths": {
            "~/*": ["./*"]
        },
        "types": ["@nuxt/vue-app", "@types/node", "@types/webpack-env"]
    }
}