Electron + shadcn/vue项目src目录结构配置困惑求助

为什么会出现两个src/components目录？ #

Electron采用主进程+渲染进程的双架构，渲染进程代码通常放在/renderer目录下。你执行npx shadcn-vue@latest add resizable时，shadcn-vue默认会在项目根目录生成组件目录，没有识别到Electron的渲染进程目录结构，因此导致了重复目录的问题。

正确配置路径，让组件生成到指定目录 #

修改项目根目录的components.json（shadcn-vue的核心配置文件）：

• 找到components字段中的dir项，将默认值"src/components"修改为"renderer/src/components"
• 同时检查tailwind字段下的config和css路径，确保指向渲染进程目录下的对应文件，示例配置如下：

{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "default",
  "typescript": false,
  "tailwind": {
    "config": "renderer/tailwind.config.js",
    "css": "renderer/src/assets/css/main.css"
  },
  "components": {
    "dir": "renderer/src/components"
  }
}

添加组件的正确方式 #

修改完components.json后，再执行组件添加命令，组件就会自动生成到/renderer/src/components目录下：

npx shadcn-vue@latest add [组件名]

组件导入规范 #

在渲染进程的Vue文件中，导入组件可以使用相对路径，也可以配置路径别名简化写法：

• 相对路径示例：

import { Resizable } from '../components/ui/resizable'

• 若在renderer/vite.config.js中配置了@指向renderer/src，可简化为：

import { Resizable } from '@/components/ui/resizable'

清理多余目录 #

根目录下的src/components属于误生成的目录，直接删除即可，避免后续造成混淆。

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