unplugin-vue-components 样式重复引用的问题

• 文件 vite.config.js

import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
   plugins: [
    vue(),
    Components({
      directoryAsNamespace: true,
      resolvers: [AntDesignVueResolver({ resolveIcons: true })]
    })
  ]
});

• 文件： demo.vue

<template>
  <div>
    <a-button @click="visible = true">显示Modal窗口</a-button>
    <a-modal v-model:visible="visible" title="测试窗口" @cancel="cancel">
      <p>这是一个用于测试的窗口</p>
    </a-modal>
  </div>
</template>
<script>
import { Modal } from "ant-design-vue";
export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    cancel() {
      Modal.error({
        title: "取消",
        content: "你取消了显示！",
      });
    },
  },
};
</script>

当前运行以上代码时，你可能会收到以下错误：

[vite] error while updating dependencies:
Error: Build failed with 1 error:
error: Two output files share the same path but have different contents: node_modules\.vite\deps_temp\ant-design-vue_es_Modal_style_css.js

其实是因为unplugin-vue-components插件默认导入时使用了与组件名称大小写一致，于上面则存在两个Modal, 要解决以上问题，只需要改改配置就行：

• 文件 vite.config.js

import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
   plugins: [
    vue(),
    Components({
      directoryAsNamespace: true,
      resolvers: [AntDesignVueResolver({ resolveIcons: true, exclude: ['AModal'] })]
    })
  ]
});

• 文件： demo.vue

<template>
  <div>
    <a-button @click="visible = true">显示Modal窗口</a-button>
    <a-modal v-model:visible="visible" title="测试窗口" @cancel="cancel">
      <p>这是一个用于测试的窗口</p>
    </a-modal>
  </div>
</template>
<script>
import 'ant-design-vue/es/modal/style/css';
import { Modal } from "ant-design-vue";
export default {
  components: {
    [Modal.name]: Modal
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    cancel() {
      Modal.error({
        title: "取消",
        content: "你取消了显示！",
      });
    },
  },
};
</script>