Vue3 + Vite + Electron 创建桌面应用

最新推荐文章于 2024-03-18 16:18:34 发布

花子ヽ

最新推荐文章于 2024-03-18 16:18:34 发布

阅读量815

点赞数

文章标签： electron vue.js javascript

本文链接：https://blog.csdn.net/m0_59614183/article/details/125996225

版权

本文档记录了使用Vue3和Vite搭建 Electron 桌面应用的详细步骤，包括创建Vite项目、项目打包、安装和配置Electron，以及解决可能出现的错误。通过新建main.js和preload.js文件，修改package.json，并最终通过npm start启动预览应用。

摘要由CSDN通过智能技术生成

1.创建vite项目

npm init vite@latest <project-name> -- --template vue

cd <project-name>
npm install

2.打包项目

npm run build

3. 安装electron

npm install --save-dev electron

如果失败Error，以下解决方案可能有效

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

npm install --save-dev electron

4.新建文件main.js

// main.js
 
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')
 
function createWindow () {
  // 创建浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
 
  // 加载 index.html
  mainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同，需要注意
 
  // 打开开发工具
  // mainWindow.webContents.openDevTools()