导入Vue组件报错：请求的模块未提供'default'导出

问题背景 #

之前在ASP.NET Core应用中，用CDN加载Vue搭配非SFC组件（内联模板）能正常运行：

<div id="app"></div>
<script type="module">
   import { createApp } from 'vue';
   import MyComponent from '../js/Vue/my-component.js?v=@version';
   createApp(MyComponent).mount('#app');
</script>

切换到SFC格式后，在子目录用Vite搭建Vue项目，修改vite.config.js尝试构建单个组件：

import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    minify: false,
    outDir: '../wwwroot/js/Vue',
    emptyOutDir: true,
    rollupOptions: {
      input: {
        helloWorld: resolve(__dirname, 'src/HelloWorld/index.html')
      }, 
      output: {
        entryFileNames: `assets/js/[name].js`,
        chunkFileNames: `assets/js/[name].js`,
        assetFileNames: `assets/[ext]/[name].[ext]`,
      }
    }
  }
})

父应用页面导入代码：

<div id="helloWorld"></div>

<script type="module">
    import { createApp } from 'vue';
    import HelloWorld from '../js/Vue/assets/js/helloWorld.js?v=@version';
    
    createApp(HelloWorld).mount('#helloWorld');
</script>

同时配置了importmap：

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

执行导入时出现错误：

Uncaught SyntaxError: The requested module '../js/Vue/assets/js/helloWorld.js?v=xxx' does not provide an export named 'default'

问题原因 #

当前Vite配置是把index.html作为入口构建完整的Vue应用，产物是启动整个应用的代码，没有对外暴露组件的default导出，所以父应用无法直接import到组件。

解决步骤 #

1. 调整Vite为组件库构建模式 #

修改vite.config.js，切换到library模式，指定组件入口并外部化Vue：

import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    minify: false,
    outDir: '../wwwroot/js/Vue',
    emptyOutDir: true,
    // 配置组件库构建模式
    lib: {
      // 指向组件的导出文件（可以直接是.vue，或专门的js导出文件）
      entry: resolve(__dirname, 'src/HelloWorld/HelloWorld.vue'),
      name: 'HelloWorld',
      fileName: 'hello-world' // 构建后的文件名
    },
    rollupOptions: {
      // 把Vue设为外部依赖，使用父应用的CDN版本
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

2. （推荐）创建组件导出入口 #

在src/HelloWorld下新建index.js，专门导出组件：

import HelloWorld from './HelloWorld.vue';
export default HelloWorld;

然后把vite.config中的entry路径改成resolve(__dirname, 'src/HelloWorld/index.js')，结构更清晰。

3. 修改父应用导入路径 #

构建完成后，产物会生成在../wwwroot/js/Vue/hello-world.js，父页面修改导入代码：

<div id="helloWorld"></div>

<script type="module">
    import { createApp } from 'vue';
    import HelloWorld from '../js/Vue/hello-world.js?v=@version';
    
    createApp(HelloWorld).mount('#helloWorld');
</script>

4. 验证产物 #

打开构建后的hello-world.js，应该能看到export default HelloWorld之类的导出语句，说明组件已正确对外暴露。

额外说明 #

• 用library模式构建的产物符合ES模块规范，适配当前的importmap配置。
• 外部化Vue可以减小组件包体积，同时避免重复加载Vue实例。

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