Electron Vue项目中Flowbite JavaScript导入后组件功能异常求助

问题背景 #

基于Electron、Vue 3、Tailwind和Flowbite构建应用时，Flowbite组件样式正常，但依赖JavaScript的组件（如模态框）首次加载无法工作；修改src/main.js触发热重载后，组件功能恢复正常。

现有配置如下：

src/main.js #

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { initFlowbite } from 'flowbite';

import 'flowbite/dist/flowbite.min.css';
import './assets/css/imports.css'

const app = createApp(App)
app.use(initFlowbite)
app.use(router)
app.mount('#app')

./assets/css/imports.css #

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('animations.css');
@import url('fonts.css');
@import url('reset.css');

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/flowbite/**/*.js"
  ],
  darkMode: true,
  theme: {
    extend: {
      colors: {
        'syer-primary': '#8B5FED',
        'syer-secondary': '#3F88D3',
      },
    },
  },
  plugins: [
    require('flowbite/plugin')
  ]
}

已尝试单独导入模块、CDN引入、组件内导入、路由中间件加载等方案，均未解决问题。

问题原因 #

核心问题是initFlowbite调用时机过早：在Vue实例挂载前执行app.use(initFlowbite)时，DOM元素尚未渲染完成，Flowbite无法定位需要初始化的组件节点；而热重载时DOM已存在，此时initFlowbite能正确绑定组件事件。

解决方案 #

方案1：Vue挂载后调用initFlowbite #

修改src/main.js，将initFlowbite的调用移到app.mount('#app')之后，确保DOM已渲染：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { initFlowbite } from 'flowbite';

import 'flowbite/dist/flowbite.min.css';
import './assets/css/imports.css'

const app = createApp(App)
app.use(router)
app.mount('#app')

// 挂载完成后初始化Flowbite
initFlowbite()

方案2：根组件onMounted钩子中初始化 #

若方案1无效（比如Electron中DOM初始化有延迟），可在根组件的onMounted钩子中执行初始化，甚至添加短暂延迟确保DOM完全就绪：

<!-- src/App.vue -->
<script setup>
import { onMounted } from 'vue'
import { initFlowbite } from 'flowbite'

onMounted(() => {
  // 延迟100ms确保DOM渲染完成，可根据实际情况调整
  setTimeout(() => {
    initFlowbite()
  }, 100)
})
</script>

同时移除main.js中的app.use(initFlowbite)。

方案3：手动初始化特定组件 #

如果仅需使用部分Flowbite组件，可针对单个组件手动初始化，避免全局初始化的时机问题，以模态框为例：

<script setup>
import { onMounted, ref } from 'vue'
import { Modal } from 'flowbite'

const modalRef = ref(null)

onMounted(() => {
  if (modalRef.value) {
    new Modal(modalRef.value)
  }
})
</script>

<template>
  <div ref="modalRef" id="example-modal" class="modal">
    <!-- 模态框内容 -->
  </div>
</template>

额外注意事项 #

• 确保Electron窗口加载完成后再显示：在Electron主进程中监听ready-to-show事件，避免窗口未就绪就加载页面：

// Electron主进程代码
const { app, BrowserWindow } = require('electron')

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  mainWindow.loadFile('index.html')

  mainWindow.on('ready-to-show', () => {
    mainWindow.show()
  })
}

app.whenReady().then(createWindow)

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