成人高考条件/网址seo查询
electron 客户端前言&需求
公司最近一个项目不适合B端访问，产品经理在需求评审时提高最理想的是做一个PC的客户端，但是公司没得做PC客户端的人，咋办？来了，是时候装B了。
咳咳，那个，那个，我来，我来搞定。
正文
1.涉及技术
公司的技术栈是react, 项目是后台，框架必然选择阿里的ant design pro,打包工具electron-builder。
2.创建项目
创建一个ant design pro项目，当然使用官方的脚手架。
yarn create umiSelect the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.app - Create project with a simple boilerplate, support typescript.block - Create a umi block.library - Create a library with umi.plugin - Create a umi plugin.下面就根据自身情况去选择。
OK，项目跑起来，正文开始了。
3. 项目改造成electron
第一步 ：项目根目录(src同级)创建main.js。作用：electron 入口配置
const {app, BrowserWindow, globalShortcut} = require('electron')
const path = require('path')function createWindow () {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')},nodeIntegration: true,webSecurity: false,allowRunningInsecureContent: true})// 加载应用----react 打包// mainWindow.loadURL(path.join('file://', __dirname, 'ant/index.html'))// 加载应用----适用于 react 开发时项目mainWindow.loadURL('http://localhost:8000/');// 打开调试.// mainWindow.webContents.openDevTools()
}app.whenReady().then(() => {createWindow()app.on('activate', function () {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// Quit when all windows are closed.
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})上面一段代码关注三点：
第一点：配置项目打包后入口文件。(这个路径后面会提到)
mainWindow.loadURL(path.join('file://', __dirname, 'ant/index.html'))第二点：配置开发时入口，这个路径根据自己项目跑起来后的路径，方便本地调试。
mainWindow.loadURL('http://localhost:8000/');第三点：是否开启调试工具，在electron里面也可以按快捷键打开mac: Option+Command + I
windows: Ctrl+Shift+I
mainWindow.webContents.openDevTools()第二步：package.json 配置（增加）
{"main": "main.js", // 配置electron 入口和前面的main.js对应，因为和package.json同级"homepage": ".", // 解决打包后绝对路径问题"scripts": {"estart": "electron .", // electron 跑起来},
}第三步：起飞 ️
// 同时跑起来react项目和electron
yarn start && yarn estart
OK， 完美。
第四步： ant design pro 打包前改造
- config -> config.js文件做如下修改
export default defineConfig({// 添加一行，ant 默认是histroy路由，作用：打包出来后资源找不到(巨坑)history: { type: 'hash' },// 此处'/'改成'./'publicPath: './',
})2. config -> plug.config.js
config.target('electron-renderer');3. 打包前需要吧main.js里面的入口引用修改掉
// 加载应用----react 打包mainWindow.loadURL(path.join('file://', __dirname, 'ant/index.html'))// 加载应用----适用于 react 开发时项目
// mainWindow.loadURL('http://localhost:8000/');在执行
yarn build因为ant 打包出来的路径是./dist和 electron 打包的./dist一致的，所以吧ant打包后的'dist'目录修改成'ant', 前面main.js里面的入口也就是'ant.index.html'。
第五步： 打包（关键）思量许久在electron-builder和electron-packager选择前者
- 安装electron-builder
yarn add electron-builder2. package.json添加
"build": {"appId": "name","mac": {"category": "category","target": ["dmg","zip"]}
},
"scripts": {"ebuild": "electron-builder -m", // 打包mac"ebuildw": "electron-builder --win --x64", // 打包windows
}3.特别注意，执行打包命令是需要下在对应系统的源资源，此时需要梯子(vpn),如果命令行安装此时还有一个坑，命令行要代理，后面的端口号要和你的梯子对应的代理接口一致。
export http_proxy=http://127.0.0.1:41091
export https_proxy=http://127.0.0.1:41091最后执行
yarn ebuild
or
yarn ebuildwend