vite+vue3+ts+electron构建

一、搭建

vite构建vue3

npm install -g vite

npm create vite@latest 文件夹名称（这一步就可以选择ts）

electron 

npm install electron -D

npm install nodemon -D  //监控代码变化、重启服务器

根目录下新建main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')

function creatWindow() {
    //主进程
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })
    mainWindow.loadURL('vue运行地址')
}

app.whenReady().then(() => {
    creatWindow()
    app.on('activate', () => {
        console.log('ready')
        if(BrowserWindow.getAllWindows().length === 0) creatWindow()
    })
    app.on('close',()=>{
        console.log('closed~~~')
    })
})

app.on('window-all-closed',function(){
    if(process.platform != 'darwin') app.quit()
})

在package.json第一层配置main

"main": "main.js" 

scripts中配置

"start": "nodemon --exec electron . --watch ./ --ext .js,.html.css.vue"

npm run dev //运行vue

npm start  //运行electron

就完成一个窗口中的vue3项目构建了

 

*npm start时如果require() 报错 

1、修改package.json中的type：从modules改为commonJs，或者直接去掉type 

2、 用import