Yii2 PHP项目中导入Vue3组件出现导出默认错误的求助

针对你遇到的"The requested module '/apps/inwentarz/app.js' does not provide an export named 'default'"错误，从组件导出、Webpack配置、导入方式三个核心环节排查修复：

1. 确保自定义Vue组件正确导出 #

选项式API组件 #

直接使用默认导出语法：

<template>
  <div class="double-wrapper">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  name: 'DoubleWrapper',
  props: ['value'],
  // 其他组件逻辑
}
</script>

<script setup>语法糖组件 #

由于setup语法糖默认不会将组件暴露为默认导出，需手动补充导出：

<script setup>
import { ref } from 'vue'
const count = ref(0)
// 组件逻辑
</script>

<!-- 手动添加默认导出 -->
<script>
import DoubleWrapper from './DoubleWrapper.vue'
export default DoubleWrapper
</script>

2. 调整Webpack配置为库模式 #

默认Webpack打包针对单页应用，需配置为可导入的库模式，确保打包产物暴露导出模块：

// webpack.config.js
module.exports = {
  // 其他基础配置（入口、loader等）
  output: {
    filename: 'app.js',
    // 配置库导出规则
    library: {
      type: 'module', // 匹配ES模块导入方式
      export: 'default' // 指定导出默认模块
    }
  },
  experiments: {
    outputModule: true // 启用ES模块输出支持
  }
}

如果需要导出多个组件，可改为命名导出：

// 组件内使用命名导出
export const DoubleWrapper = { /* ... */ }
export const AnotherComponent = { /* ... */ }

// Webpack配置调整
library: {
  type: 'module',
  export: 'named' // 导出所有命名模块
}

3. 修正Yii2视图中的导入语句 #

根据配置的导出类型匹配导入方式：

• 默认导出时：

import DoubleWrapper from '/apps/inwentarz/app.js'

// 在Vue应用中注册组件
const app = Vue.createApp({ /* ... */ })
app.component('DoubleWrapper', DoubleWrapper)

• 命名导出时：

import { DoubleWrapper } from '/apps/inwentarz/app.js'

额外验证步骤 #

1. 直接访问/apps/inwentarz/app.js，确认文件可正常加载（无404）
2. 查看打包后的app.js末尾，确认存在export default DoubleWrapper或对应命名导出语句

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