Chakra UI是否兼容Vue3 Vite？使用时遇报错及DOM空白问题求助

Chakra UI Vue 完全支持Vue3 + Vite，官方目前优先维护适配Vite的版本，毕竟Vue CLI已进入维护模式。针对你遇到的组件解析失败、页面空白问题，大概率是包版本不对或注册流程错误，解决方案如下：

• 安装正确的适配Vue3的包
  旧版@chakra-ui/vue仅支持Vue2，需替换为Vue3专用包：

  npm uninstall @chakra-ui/vue
  npm install @chakra-ui/vue-next @emotion/css
  

• 在项目入口文件（main.ts/main.js）正确注册Chakra插件

  import { createApp } from 'vue'
  import App from './App.vue'
  import ChakraUIVueNext from '@chakra-ui/vue-next'
  
  const app = createApp(App)
  app.use(ChakraUIVueNext)
  app.mount('#app')
  

• （可选）配置自动导入组件
  若想无需手动导入组件即可使用，可安装unplugin-vue-components并配置解析器：

  1. 安装依赖：

     npm install unplugin-vue-components -D
     

  2. 修改vite.config.ts：

     import { defineConfig } from 'vite'
     import vue from '@vitejs/plugin-vue'
     import Components from 'unplugin-vue-components/vite'
     import { ChakraUiResolver } from '@chakra-ui/vue-next'
     
     export default defineConfig({
       plugins: [
         vue(),
         Components({
           resolvers: [ChakraUiResolver()]
         })
       ]
     })
     

• 验证组件使用
  在App.vue中测试基础组件：

  <template>
    <chakra-container>
      <chakra-heading>Hello Chakra UI + Vite!</chakra-heading>
    </chakra-container>
  </template>
  

完成以上步骤后，重启Vite服务即可正常渲染Chakra组件，解决页面空白与组件解析报错问题。

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