Nuxt.js报错排查：export 'Toto' was not found in '~/components/Toto'

嘿，这个问题我碰到过好多次啦，核心原因很简单——你用了解构导入的写法，但你的组件是默认导出的，两者不匹配导致编译器找不到对应的导出项。下面给你几种解决办法，按需选就行：

1. 修正导入语法（最推荐、最直接的修复） #

你的Toto.vue里用的是Vue组件标准的export default（默认导出），所以导入的时候不能用{ Toto }这种解构语法，改成默认导入就好：

// index.vue 的<script>部分
import Toto from '~/components/Toto'

export default {
  components: { Toto }
}

甚至还能更简洁（ES6对象属性简写）：

import Toto from '~/components/Toto'

export default {
  components: { Toto } // 这里的Toto相当于Toto: Toto
}

2. （可选）改用命名导出（如果你偏爱解构写法） #

要是你特别想用{ Toto }这种解构导入，那得把Toto.vue的导出改成命名导出：

// Toto.vue 的<script>部分
export const Toto = {
  name: 'Toto'
}

不过这种写法在Vue组件开发里并不常用，默认导出才是标准做法，所以还是更推荐第一种方法。

3. 偷懒小技巧：用Nuxt的自动导入组件功能 #

不管你用的是Nuxt 2还是Nuxt 3，其实都可以不用手动导入组件！Nuxt会自动识别components目录下的所有组件，帮你全局注册好，你直接在模板里写<Toto />就行，连<script>里的导入和注册代码都能删掉。

比如Nuxt 3里完全不用管导入的事，组件放对目录就能直接用；Nuxt 2只要确保nuxt.config.js里的components选项是开启的（默认就是开着的）就行。

为啥会报错？再给你掰扯清楚 #

export default导出的是模块的默认内容，导入的时候不需要加大括号；而{ Toto }这种写法是用来导入命名导出的内容的，你的组件里根本没做命名导出，编译器自然找不到叫Toto的导出项，就抛出这个错误啦。

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