前言:
这里是基于 之前搭建的一个vue-cli+Electron项目做的相关配置。
项目地址: https://github.com/ddx2019/vue-electron-demo,项目的更多说明信息参考:作者往期文章
一、进行相关配置
在项目根目录下,新建 vue.config.js
文件,文件内容如下,可据自己的具体情况做相应更改;
vue.config.js
文件:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
pluginOptions: {
electronBuilder: {
builderOptions: {
'appId': 'wyDemo.com',
'productName': 'wyDemo', // 项目名,也是生成的安装文件名,即wyDemo.exe
'copyright': 'ddx Copyright © 2020', // 版权信息
'files': [
'./**/*'
],
'extraFiles': [ // 把指定的资源复制到程序根目录,即把server文件夹的内容复制到程序根目录,这里server文件夹下的内容相当于我的后台,我在background.js中有相应的处理。
'./server'
],
'directories': {
'output': './dists' // 输出文件路径
},
'win': { // win相关配置
'icon': './favicon.ico', // 图标,当前图标在根目录下,注意这里有两个坑
"requestedExecutionLevel": "requireAdministrator", //获取管理员权限
'target': [{
'target': 'nsis', // 利用nsis制作安装程序
'arch': [
'x64', // 64位
'ia32'
]
}]
},
'nsis': {
'oneClick': false, // 是否一键安装
'allowElevation': true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
'allowToChangeInstallationDirectory': true, // 允许修改安装目录
'installerIcon': './favicon.ico', // 安装图标
'uninstallerIcon': './favicon.ico', // 卸载图标
'installerHeaderIcon': './favicon.ico', // 安装时头部图标
'createDesktopShortcut': true, // 创建桌面图标
'createStartMenuShortcut': true, // 创建开始菜单图标
'shortcutName': 'wyDemo' // 图标名称(项目名称)
}
}
}
}
}
二、运行yarn e:build命令,打包
运行yarn e:build命令打包成功后,在项目根目录生成一个dists的文件夹,如图:
三、自定义安装electron的应用程序
安装完成,在桌面创建了 一个快捷方式,点它也可运行。
四、卸载该程序:
把它当成普通的应用程序卸载即可。
找到控制面板,在控制面板中找到程序和功能,点击卸载,将其卸载即可。