Vue项目引入WinWheel时自动导入PrimeVue Image组件导致语法错误

问题分析 #

你在从ASP.NET MVC迁移到Vue 3 + Vite项目时，引入WinWheel组件后遇到了这样的错误：

ActivateChoice.vue:55 SyntaxError: The requested module '/node_modules/.vite/deps/primevue_image.js?v=07215650' does not provide an export named 'Image' (at wheel.js:2:1)

根源在于你配置的unplugin-auto-import和unplugin-vue-components插件，它们的PrimeVueResolver会扫描项目文件识别组件。WinWheel代码中存在的Image标识符被解析器误判为PrimeVue的Image组件，从而自动在wheel.js中插入了错误的导入语句：

import {Image, image} from "/node_modules/.vite/deps/primevue_image.js?v=07215650";

解决方案 #

要解决这个问题，只需要把WinWheel所在的文件/目录排除在自动导入插件的扫描范围之外即可：

1. 修改Vite配置中的自动导入规则

在vite.config.js里，给AutoImport和Components插件添加排除规则，避免解析器处理wheel.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import {PrimeVueResolver} from '@primevue/auto-import-resolver';
import basicSsl from '@vitejs/plugin-basic-ssl';
import { fileURLToPath, URL } from 'node:url';    

export default defineConfig({
  esbuild: {
    supported: {
      'top-level-await': true,
    },
  },
  plugins: [
    basicSsl(),
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'],
      resolvers: [PrimeVueResolver()],
      dirs: ['./src/infrastructure'],
      // 排除wheel.js文件，避免误解析
      exclude: [/\.\/src\/infrastructure\/wheel\.js$/]
    }),
    Components({
      resolvers: [PrimeVueResolver()],
      // 同样排除wheel.js
      exclude: [/\.\/src\/infrastructure\/wheel\.js$/]
    }),
  ],
  server: {
    open: '/',
  },
  resolve: {
    alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
    }
}
});

2. （可选）使用npm安装vue-winwheel替代手动复制文件

如果你用的是第三方封装的vue-winwheel，建议直接通过npm安装，这样包内的文件不会被你的项目自动导入插件扫描：

npm install vue-winwheel

之后在组件中正常导入使用即可：

import VueWinwheel from 'vue-winwheel'

验证操作 #

修改配置后重启Vite开发服务器，检查浏览器控制台是否还会出现之前的语法错误，同时查看wheel.js中是否还会自动生成错误的Image导入语句，问题应该就能解决了。

备注：内容来源于stack exchange，提问作者Wasyster