如何在vue项目中添加electron安装elcetron 使用npm指令 npm install electron 如

安装elcetron

使用npm指令 npm install electron

如果安装后长时间无响应,打开npm配置文件npm config edit

在空白处添加以下代码,配置electron的下载镜像

electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

配置electron

配置package.json文件

在配置文件package.json中的

  "name": "admin",
  "version": "0.0.0",
  "private": true,
  "type": "module",

添加"main": "main.cjs"

并在"scripts": {}中添加"start": "electron ."

配置electron配置文件

在package.json同目录下创建main.cjs文件,内容如下

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'//屏蔽安全警告
let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') // 在这里添加你的 preload 脚本
    },
    autoHideMenuBar: true
  })

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, './dist/index.html'),
      protocol: 'file:',
      slashes: true
    })
  )

  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

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

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

并在同目录下创建preload.js

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])
  }
})

注:main.cjs和preload.js可以放在其他文件,但是要修改相应的引用路径,package.json引用了main.cjs

main.cjs中引用了preload.js 如有需要请进行修改

打包构建以及运行

若vue项目采用vite构建,则需在vite.config.ts中添加如下代码 base: './' 示例

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  base: './'
})

构建项目npm run build

运行项目npm start

结束

如何在vue项目中添加electron