如何修复ES6模块导入报错：未提供名为test的导出

错误原因 #

你在index.vue中使用命名导入语法import { test } from './app.ts'，但app.ts仅导出了一个默认对象，这个对象内部包含test属性，并非单独的命名导出项，所以无法通过解构命名的方式获取test。

修复方案（任选其一即可） #

方案1：修改index.vue的导入方式 #

直接导入默认导出的对象，再访问其test属性：

// ./index.vue
import app from './app.ts'

console.log(app.test)

// 或者先解构再使用
const { test } = app
console.log(test)

方案2：在app.ts中添加命名导出 #

在app.ts里把对象的test属性单独命名导出：

// ./app.ts
import app from './app/index'

export default app
// 新增命名导出test
export const test = app.test

修改后index.vue的原有导入代码无需改动，就能正常获取test。

方案3：在源头修改导出规则 #

直接在./app/index.ts中添加命名导出，再让app.ts转发这个导出：

1. 修改./app/index.ts：

// ./app/index.ts
// 新增命名导出test
export const test = 1
const app = {
  test,
  ...
}
export default app

2. 修改./app.ts：

// ./app.ts
import app, { test } from './app/index'

export default app
// 转发命名导出
export { test }

这种方式适合需要在多个模块中单独导入test的场景。

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