侧边栏壁纸
博主头像
学海无涯博主等级

有疑问可发邮件[email protected]

  • 累计撰写 326 篇文章
  • 累计创建 85 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

electron-vue3(一)-- 基础环境配置

利刃
2022-08-31 / 0 评论 / 0 点赞 / 16 阅读 / 8774 字
温馨提示:
本文最后更新于 2024-08-13,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1、 创建一个名称为electron-vite的vite项目,模板为vue-ts

yarn create vite electron-vite –template vue-ts

image

2、安装项目依赖

yarn install

image

3、vite启动测试

npm run dev

image

5、安装electron concurrently cross-env electron-builder包。

yarn add electron concurrently cross-env electron-builder –D

image

6、构建electron

创建electron文件夹,在文件夹下创建main.js,preload.js

main.js

// 引入app 浏览器主窗体
const { app, BrowserWindow } = require('electron')
// 引入路径
const path = require('path')

// 环境变量,用于判断当前工程处于开发、生产环境
const NODE_ENV = process.env.NODE_ENV;
// 定义一个窗体函数
function createWindow () {
  // 定义窗体对象
  const win = new BrowserWindow({
    // 定义窗体的宽
    width: 800,
    // 定义窗体的高
    height: 600,
    webPreferences: {
      // 定义预加载文件
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 定义载入的主页面
  // win.loadFile('index.html')
  win.loadURL(
      // 当环境为开发环境时,访问http://localhost:5173 页面进行显示,否则显示上级目录的dist目录下的index.html文件。
      NODE_ENV ==="development" ? "http://localhost:5173" : `file://${path.join(__dirname,"../dist/index.html")}`
  );
}

// 当应用准备完毕后,执行事项
app.whenReady().then(() => {
  // 创建窗口
  createWindow()
  // 事件监听为激活时,执行事项
  app.on('activate', () => {
    // 窗口未显示时,创建窗口
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})
// 事件监听为关闭窗口时,退出所有窗口
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

image

7、构建package.json。

安装wait-on:

yarn add wait-on

使用wait-on等待vite启动后,再启动electron。

安装 cross-env

yarn add cross-env

通过cross-env设置环境变量

配置package.json文件如下:

"electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron ."

image

8、测试启动electron。

需要再次安装electron

yarn add electron


启用项目

yarn run electron

image

2022-8-31 16:50:06
0
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin

评论区