Vue3+TS+Electron应用打包为exe后无法正常运行求助

问题1：包含

return (<LoginForm/>)

时bgimage样式丢失 #

• 调整Vite打包配置，适配Electron环境的资源路径：
  在vite.config.ts中配置相对路径与资源命名规则：

  export default defineConfig({
    build: {
      base: './', // 启用相对路径
      assetsDir: 'assets',
      rollupOptions: {
        output: {
          assetFileNames: 'assets/[name].[hash].[ext]'
        }
      }
    }
  })
  

• 修正bgimage的CSS路径，避免绝对路径，改用Vite别名或相对路径：

  .bgimage {
    background-image: url('@/assets/bg.png');
    /* 或相对路径写法 */
    background-image: url('../assets/bg.png');
  }
  

• 防止样式被Tree Shaking误删，给bgimage类添加/* vite-ignore */注释，或临时关闭CSS代码分割排查：build.cssCodeSplit: false（不推荐长期使用）。

问题2：

return (<LoginForm/>)

在内打包报错TypeError: Cannot read properties of null (reading 'subTree') #

• 升级Vue和@vitejs/plugin-vue到最新稳定版，旧版本可能存在Transition与打包后DOM的兼容bug。
• 检查Transition的name属性，避免特殊字符，确保组件渲染条件（如v-if）逻辑正确：

  <Transition name="fade">
    <LoginForm v-if="showLoginForm" />
  </Transition>
  

• 在Electron主进程中，等待DOM完全就绪后再执行初始化：

  // Electron主进程文件（如main.ts）
  mainWindow.loadFile('dist/index.html').then(() => {
    mainWindow.webContents.on('dom-ready', () => {
      // 这里可添加窗口初始化逻辑
    })
  })
  

问题3：移出Transition后报错TypeError: Cannot destructure property 'currentRoute' of 'e.useRouter(...)' as it is undefined #

• 确认Vue Router在Electron环境中正确初始化，Vue入口文件（如src/main.ts）中需先挂载Router再挂载App：

  import { createApp } from 'vue'
  import { createRouter, createWebHashHistory } from 'vue-router'
  import App from './App.vue'
  import routes from './router/routes'
  
  const router = createRouter({
    history: createWebHashHistory(), // Electron推荐用hash路由，避免路径解析问题
    routes
  })
  
  const app = createApp(App)
  app.use(router)
  app.mount('#app')
  

• 在

  return (<LoginForm/>)
  

  组件中，useRouter()必须在setup()函数内部调用，不能在组件外部提前执行：

  <script setup lang="ts">
  import { useRouter } from 'vue-router'
  
  // 正确：在setup上下文内调用useRouter
  const router = useRouter()
  const currentRoute = router.currentRoute
  </script>
  

• 检查Electron打包配置（如electron-builder.json），确保files字段包含所有必要文件：

  {
    "files": [
      "dist/**/*",
      "node_modules/**/*",
      "main.js"
    ]
  }
  

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