electron 配置 shadcn-ui

jingxindeyi2026-04-15 8:58

之前在 electron react 中配置 shadcn-ui 一直有问题，找不到包等。

这次终于走通了

tailwind css 省事直接配置 cdn 文件

html 复制代码

 <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

shadn-ui 选择手动安装

安装前先配置下 @ 指向

electron.vite.config.ts

ts 复制代码

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  main: { /* ... */ },
  preload: { /* ... */ },
  renderer: {
    resolve: {
      alias: {
        // 关键点：将 @ 指向渲染进程的源码目录
        '@': resolve('src/renderer/src'),
      }
    },
    plugins: [react()]
  }
})

tsconfig.json

ts 复制代码

{
  "files": [],
  "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/renderer/src/*"]
    }
  }
}

具体安装方法

https://ui.shadcn.com/docs/installation/manual

这里注意 components.json 放在根目录下面， utils.ts 要放在 renderer/src/lib 下面