Electron23 + Vue3 + Vite + TypeScript 安装、运行、部署教程

步骤

1. 使用vite初始化项目

npm init vite

第一次初始化会提示安装，选Y即可，之后配置项目名称，框架语言选择vue，脚本语言ts与js任选其一即可。

2. 进入项目目录, 安装依赖与测试

cd myProject
# 安装依赖
npm install
# 运行开发环境测试
npm run dev

访问控制台提供的链接，打开页面正常显示则说明vue项目启动正常

3. 配置npm或yarn淘宝源, 安装electron依赖, 若安装失败, 可使用cnpm安装

npm config set registry https://registry.npmmirror.com
# npm 安装 electron, -D 参数表示安装为本地依赖
npm install electron -D

# yarn设置淘宝源 (可选)
# yarn config set registry https://registry.npmmirror.com

# cnpm 安装 electron (可选)
# cnpm install electron -D

4. 在项目根目录创建electron的入口文件main.js, 并配置如下

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

const createWindow = () => {

    const win = new BrowserWindow({
        width: 1200,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, './preload/index.js')
        },
    })
    // 这里改为自己vue项目启动端口, 仅开发环境配置, 生产环境后续提供修改方案
    win.loadURL("http://localhost:5173")
    
    // 打开开发者工具
    win.webContents.openDevTools()
}

app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows.length === 0) {
            createWindow()
        }
    })
})

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

5. 创建预加载脚本在./preload/index.js位置(myProject/preload/index.js)

// 随便打印检查是否加载成功
console.log('preload success')

6. 修改package.json文件

{
    ...,
++  "main": "main.js", // 新增main配
--  "type": "module", // 删除module配置, electron仅支持commonjs
    ...,
}

7. 安装nodemon以便于electron热重启调试(可选)

npm install nodemon -D

8. 修改package.json文件的启动命令

{
    ...,
    "scripts": {
        ...,
        // 安装了nodemon
++      "start": "nodemon --exec elctron . --watch ./ --ext .js,.html,.css,.ts,.d.ts,.vue",
        // 未安装nodemon
        "start": "electron .",
    }
}

9. 开发环境运行测试

# 启动两个控制台
# 1. 启动vue服务
npm run dev
# 2. 启动electron, 也可直接 npm start
npm run start

若在窗口中正常加载则说明electron与vue项目集成正常

10. 部署(待完成)

原创声明

平台文章均为原创文章，未经许可，禁止转载。

如需转载，请联系作者获取授权，并注明来源及原文链接。