React18构建Vite+Electron项目以及打包

一.先创建项目

javascript 复制代码
cnpm create vite

选择React => JavaScript =>cd react_vite => cnpm i =>npm run dev

二.安装Electron依赖

指定版本相对稳定

javascript 复制代码
cnpm i electron@19.0.10 -D
cnpm i vite-plugin-electron@0.9.3 -D
cnpm i electron-builder@23.0.1 -D

三.创建electron目录

创建electron/index.js electron文件夹与src同级

index.js:

javascript 复制代码
import { app, BrowserWindow, } from 'electron'
import path from "path"
let mainWin
const createWindow = () => {
    mainWin = new BrowserWindow({
        width: 800,
        height: 500,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })
    if (process.env.NODE_ENV !== 'development') {
        mainWin.loadFile(path.join(__dirname, "../index.html"))
    } else {
        // VITE_DEV_SERVER_HOST 如果是undefined 换成  VITE_DEV_SERVER_HOSTNAME
        mainWin.loadURL(`http://${process.env['VITE_DEV_SERVER_HOSTNAME']}:${process.env['VITE_DEV_SERVER_PORT']}`)
    }
}

app.whenReady().then(createWindow)

四.配置vite.config.js与package.json

vite.config.js:

javascript 复制代码
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), electron({
    main: {
      // 置顶 electron 入口文件
      entry: "electron/index.js"
    }
  })],
})

package.json:

把 "type":"module" 删除掉,添加 "main": "dist/electron/index.js", 指定入口文件


运行项目:npm run dev


打包:修改package.json配置

"build": "vite build && electron-builder",

添加build配置

javascript 复制代码
{
  "name": "react_vite",
  "private": true,
  "version": "0.0.0",
  "main": "dist/electron/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build && electron-builder",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "electron": "^19.0.10",
    "electron-builder": "^23.0.1",
    "vite": "^4.2.0",
    "vite-plugin-electron": "^0.9.3"
  },
  "build": {
    "appId": "com.electron.desktop",
    "productName": "electron",
    "asar": false,
    "copyright": "Copyright © 2022 electron",
    "directories": {
      "output": "release/"
    },
    "files": [
      "dist"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "版本更新的具体内容"
    }
  }
}

npm run build

相关推荐
Myli_ing34 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风37 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave44 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue