vue3+vite+electron项目搭建步骤

初始化vite

npm init vite

1. 创建项目名称
   
2. 选择Vue
   
3. 我这里选择的是js，你们可以自定义选择
   
4. 根据以下代码依次执行

cd electron-demo   // 进入项目
npm install   // 安装依赖
npm run dev    //启动

集成electron

1. 安装electron

npm install electron -D

2. 在根目录下新建一个electron文件夹，在文件夹里新建文件main,js
   
3. 修改packge.json文件里的入口

"main":"electron/main.js"

4. 在main.js里新增如下代码

// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
  // 创建浏览窗口
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    webPreferences: {
     // preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载 index.html
  mainWindow.loadFile('index.html')

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // 在 macOS 系统内, 如果没有已开启的应用窗口
    // 点击托盘图标时通常会重新创建一个新窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。

5. 安装nodemon

npm i nodemon -D

6. 在packge.json文件里新增electron启动脚本

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

7. 启动electron

npm start

如果启动包如下错误

删除掉packge.json里面的type就行，因为electron依赖的是node而不是es6

重新运行

npm start

出现如下窗口

把main.js里面的

改成

 mainWindow.loadURL('http://127.0.0.1:5174')  //后面的地址为你本地启动的地址

如下图就已经启动成功

8. 设置窗口状态

npm i electron-win-state -D

修改main.js部分内容

const { app, BrowserWindow } = require('electron')
const path = require('path')
const winState = require('electron-win-state').default

const createWindow = () => {
  const winState = new winState ({
  	defaultWidth: 1000,
  	defaultHeight: 800
  })
  // 创建浏览窗口
  const mainWindow = new BrowserWindow({
  // 自定义窗口状态
    ...winState.winOpions,
    // 定义预加载的js
    webPreferences: {
     // preload: path.join(__dirname, 'preload.js')
    }
  })

9. 定义预加载的js
   在electron文件夹里新建preload.js文件，新增如下代码

// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

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

10. 在main.js里面引入

const { app, BrowserWindow } = require('electron')
const path = require('path')
const winState = require('electron-win-state').default
const createWindow = () => {
  const winState = new winState ({
  	defaultWidth: 1000,
  	defaultHeight: 800
  })
  // 创建浏览窗口
  const mainWindow = new BrowserWindow({
  // 自定义窗口状态
    ...winState.winOpions,
    // 定义预加载的js
    webPreferences: {
    preload: path.join(__dirname, './preload.js')
    }
  })

11. 严格模式
    如果打开控制台出现如下界面
    
    在index.html文件里或者main.js里添加以下代码
    

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';

此时vue3+vite+electron的基本搭建已将完成，希望对你有所帮助