React - AntDesignPro 结合 electron 开发及打包

绿子丿

已于 2022-03-03 13:42:58 修改

阅读量1.4k

点赞数 2

分类专栏： electron 文章标签： react.js electron javascript

于 2022-02-15 15:14:34 首次发布

本文链接：https://blog.csdn.net/weixin_45259457/article/details/122941313

版权

electron 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先有自己的 antDesignPro 或 antdesign 项目；具体查看 antdesignPro官网
yarn add electron;
项目根目录添加 main.js；这里贴出来吧；复制走就行；

const {
  app,
  BrowserWindow
} = require('electron')
const path = require('path');
const pkg = require('./package.json');
const url = require('url');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false,
    }
  })

   // package.json 内的配置  -- 这种判断有点傻，打包要配置DEV属性
  if (pkg.DEV) { 
  	// 开发时使用
    win.loadURL('http://localhost:8001/');
  } else {
   // 打包
    win.loadURL(url.format({
    	// 这里地址别错了呀
      pathname: path.join(__dirname, 'dist/index.html'),
      protocol: 'file:',
      slashes: true
    }))
  }


}

app.whenReady().then(() => {
  createWindow()

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

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

package.json 添加；“main”: “main.js”,
最后加上一句 electron 开发启动命令 “electron”: “electron . --hot”,
先运行 yarn start 启动命令
运行 yarn electron ~
接下来：打包准备！
在 config / config.ts 下配置
同时 main.js 配置，当打包环境时

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

安装打包依赖 yarn add electron-packager -g;
先 yarn build 成包，再下一步呀
最后打包命令，自行了解，很简单 yarn package

即 electron-packager . pms --win --out=release --arch=x64 --app-version=1.0.0 --overwrite --ignore=node_modules
打包后找到 release >> 下的exe文件；