alex8088 / quick-start

An easy way to start a front-end project.
MIT License
265 stars 37 forks source link

试图改变项目结构之后启动白屏的疑惑,求大佬解答 #46

Closed sanbei101 closed 2 months ago

sanbei101 commented 2 months ago

Describe the bug

因为在学习electron的项目的时候,经常在网上看到与这个electron-vite不同的结构--electron-vite-vue-template,所以我尝试把本项目的vue3+ts模板改造为这个结构

tree -I 'node_modules'
.
├── electron
│   ├── main
│   │   └── index.ts
│   └── preload
│       ├── index.d.ts
│       └── index.ts
├── electron-builder.yml
├── electron.vite.config.ts
├── out
│   ├── main
│   │   └── index.js
│   └── preload
│       └── index.js
├── package.json
├── pnpm-lock.yaml
├── README.md
├── resources
│   └── icon.png
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── base.css
│   │   ├── electron.svg
│   │   ├── main.css
│   │   └── wavy-lines.svg
│   ├── components
│   │   └── Versions.vue
│   ├── env.d.ts
│   ├── index.html
│   └── main.ts
├── tsconfig.json
├── tsconfig.node.json
└── tsconfig.web.json

以下为electron.vite.config.ts

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

export default defineConfig({
  main: {
    build: {
      lib: {
        entry: resolve(__dirname, 'electron/main/index.ts')
      }
    },
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    build: {
      lib: {
        entry: resolve(__dirname, 'electron/preload/index.ts')
      }
    },
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    root: '.',
    build: {
      rollupOptions: {
        input: resolve(__dirname, 'src/index.html')
      }
    },
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src')
      }
    },
    plugins: [vue()]
  }
})

但是这个时候启动就白屏了 image

有大佬能解答一下为什么,怎么做才能成功吗?

Used Scaffolding

create-electron

Used Package Manager

pnpm

Validations

sanbei101 commented 2 months ago

哦我明白了,我没有仔细看文档!不好意思