未找到 Nuxt export 'default'(作为 'mod' 导入) [英] Nuxt export 'default' (imported as 'mod') was not found
问题描述
我正在使用 Nuxt 和 Typescript.我创建了一个以下组件:
<div class="field"><label class="label" v-if="typeof label !== 'undefined'">{{ label }}</label><div class="控件"><文本区域v-if="inputType === 'textarea'"类=文本区域"@input="$emit('input', $event.target.value)"></textarea><输入v-if="inputType === '输入'":类型=类型"类=输入"@input="$emit('input', $event.target.value)">
模板><script lang="ts">从vue-property-decorator"导入 { Vue, Component, Prop }@成分({})导出默认类 AppInput 扩展 Vue {@Prop({ type: String, required: false, default: "input" })inputType!: 字符串@Prop({ type: String, required: false })标签!:字符串@Prop({ type: String, required: false, default: "text" })类型!:字符串}<风格></风格>
然后在 @/plugins/components.ts
中,我按如下方式导入组件:
从vue"导入Vue从@/components/Forms/AppInput.vue"导入 AppInputVue.component("AppInput", AppInput)
当我用 Nuxt 编译项目时,它抛出 export 'default' (imported as 'mod') not found
错误.请帮忙!
我使用以下 tsconfig 解决了:
<预><代码>{编译器选项":{"目标": "esnext",模块":esnext","moduleResolution": "节点","lib": ["esnext", "esnext.asynciterable", "dom"],"esModuleInterop": 真,"experimentalDecorators": 真,"allowJs": 真,"sourceMap": 真,严格":错误,allowSyntheticDefaultImports":真,noImplicitAny":假,noEmit":真,"baseUrl": ".","resolveJsonModule": 真,路径":{"~/*": ["./*"]},"types": ["@nuxt/vue-app", "@types/node", "@types/webpack-env"]}}I am using Nuxt with Typescript. I create a following component:
<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>
And then in @/plugins/components.ts
, I import the component as following:
import Vue from "vue"
import AppInput from "@/components/Forms/AppInput.vue"
Vue.component("AppInput", AppInput)
When I compile the project with Nuxt, it throws me export 'default' (imported as 'mod') was not found
error. Please help!
I solved using the following 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"]
}
}
这篇关于未找到 Nuxt export 'default'(作为 'mod' 导入)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!