重新写了一个electron小工具，给美女运营老师用

前言

接前一篇美女运营天天找我改配置，给她写了个脚本，终于安静了

之前只是写了一个脚本，本地运行，通过读取文件流获取文件数据，格式化对应数据，运营老师也不会安装node，还是需要我去操作。现在我用electron生成一个桌面应用直接生成后复制json，去配置，全程不需要我参与了。

之前的脚本

const fs = require('fs')
const csv = require('csv-parser');

const csvfilePath = './xxx.csv';
const uidsfilePath = './uids.json';

const results = [];
let newarr = [];
let lineCount = 0;

fs.createReadStream(csvfilePath)
	.pipe(csv({ headers: true }))
	.on('data', (data) => {
		results.push(data);
		lineCount++;
	})
	.on('end',async () => {
		console.log(results[0])
		await format(results);
		fs.writeFile(uidsfilePath, JSON.stringify(newarr), () => {
			console.log('done')
		})
	});
const format = (results) => {
	newarr = results.map(item => {
		if(item._0 === 'key' || item._1 === 'value') {
			return {}
		}
		return {
			label: `${item._1}-${item._0}`,
			value: item._1
		}
	})
}

electron

使用vue3和vite创建vue的项目然后引入electron

安装vite

npm create vite@latest electron-desktop-tool

安装 引入electron&插件

npm install -D electron // electron
npm install -D electron-builder //用于打包可安装exe程序和绿色版免安装exe程序
npm install -D electron-devtools-installer // 调试
npm install -D vite-plugin-electron // vite构建插件

创建主进程

在vue 同级src目录下，创建src-electron 文件夹 新建main.js

// src-electron/main.js
const { app, BrowserWindow } = require('electron')
const { join } = require('path')

// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

// 创建浏览器窗口时，调用这个函数。
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        title: 'electron-vite',
        // icon: join(__dirname, '../public/logo.ico'),
    })

    // win.loadURL('http://localhost:3000')
    // development模式
    if(process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
        // 开启调试台
        win.webContents.openDevTools()
    }else {
        win.loadFile(join(__dirname, '../dist/index.html'))
    }
}

// Electron 会在初始化后并准备
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

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

配置插件入口

在vite.config.ts中配置vite-plugin-electron 插件入口

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        electron({
            // 主进程入口文件
            entry: './src-electron/main.js'
        })
    ],
    /*开发服务器选项*/
    server: {
        // 端口
        port: 3000,
    }
})

配置package.json

在package.json 新增入口文件 "main": "./src-electron/main.js",

原神启动 emmm electron启动

运行 npm run dev 启动项目

打包配置

首先配置一下打包的命令,在package.json "scripts"里面配置这个打包命令

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "postinstall": "patch-package",
    "electron:build": "vite build && electron-builder",
    "pack32": "vite build && electron-builder --win --ia32",
    "pack64": "vite build && electron-builder --win --x64"
  },

同样package.json 需要添加打包配置

  "scripts": {
      ...
  },
  "build": {
    "productName": "ElectronDeskTopTool",
    "appId": "dyy.dongyuanwai",
    "copyright": "dyy.dongyuanwai © 2024",
    "compression": "maximum",
    "asar": true,
    "directories": {
      "output": "release/"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "perMachine": true,
      "deleteAppDataOnUninstall": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "ElectronDeskTopTool"
    },
    "win": {
      "icon": "./public/logo.ico",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}",
      "target": [
        {
          "target": "nsis"
        }
      ]
    },
    "mac": {
      "icon": "./public/logo.ico",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
    },
    "linux": {
      "icon": "./public/logo.ico",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
    }
  },

然后npm run electron:build

页面效果

github地址

后续还会继续更新~