vue项目打包exe文件
- 拉取electron官网上的demo,拉下来之后安装依赖
git clone https://github.com/electron/electron-quick-start
npm i
npm install electron --save-dev
npm install electron-packager --save-dev
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
publicPath: './',
transpileDependencies: true
})
- 想要自定义下图位置的图标,需在public文件下复制一个
.ico
(必须是ico格式)格式的图标文件。(还需要结合electron-quick-start项目的 package.json,这在后面会说到 )
- 想要自定义下图位置的图标,须在自己项目的public文件夹下的index.html进行设置
<!DOCTYPE html>
<html lang="">
<head>
<link rel="icon" href="<%= BASE_URL %>icon.ico">
</head>
</body>
</html>
- 打包自己的项目,生成
dist
文件,点击dist
文件在explore中打开,复制dist文件
npm run build
- 将复制的dist文件粘贴到
electron-quick-start
中(注意dist的位置)
- 进入electron-quick-start项目,删除项目根目录下的自带的
index.html
文件 - 在electron-quick-start项目中找到 main.js ,修改打包的文件路径为我们的index.html
mainWindow.loadFile('index.html')
mainWindow.loadFile('./dist/index.html')*
- 设置electron-quick-start项目的 package.json
{
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ 智能机器人调度控制系统 --platform=win32 --arch=x64 --icon=./dist/icon.ico --overwrite"
}
}
- 在
electron-quick-start
目录下运行npm run packager
,就会出现一个智能机器人调度控制系统
的文件(第一次执行需要从外网下载东西,很慢,可以爬梯子,在软件里打开CMD,再执行npm run packager),打开它文件夹,执行里面的.exe文件即可运行