1. 安装compression-webpack-plugin
cnpm install compression-webpack-plugin@5.0.2 --save
2. 在根目录下创建vue.config.js打包配置文件,如下
注意看注释:
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
productionSourceMap: false,
configureWebpack: config => { //压缩较大的打包文件
if (process.env.NODE_ENV === 'production') { //判断是生产环境
return {
plugins: [
new CompressionPlugin({
algorithm: 'gzip', //开启gzip
test: /\.js$|\.html$|.\css/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false // 不删除源文件
})
]
}
}
},
lintOnSave: false,
devServer: {
overlay: {
warning: false,
errors: false
}
},
pluginOptions: {
electronBuilder: {
builderOptions: {
"appId": "Electron_test",
"productName": "Electron_test", //项目名,也是生成的安装文件名,即Electron_test.exe
"asar": true,
"copyright": "Copyright © 2021", //版权信息
"directories": {
"output": "build" //输出文件路径
},
//"extraResources": [{ //将指定的包打包至指定位置
// "from": "node_modules/regedit/vbs",
// "to": "vbs",
// "filter": [
// "**/*"
// ]
//}],
"win": {
"icon": './public/logo.ico',
"target": [{
"target": "nsis", //利用nsis制作安装程序
"arch": [
"x64", //64位
// "ia32" //32位
]
}]
},
"nsis": {
"guid": "Electron_test",
"oneClick": false, // 是否一键安装
"perMachine": true,
"allowElevation": true, // 允许请求提升。 如果为false,则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "./public/logo.ico", // 安装图标
"uninstallerIcon": "./public/logo.ico", //卸载图标
"installerHeaderIcon": "./public/logo.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true, // 创建开始菜单图标
"shortcutName": "Electron_test", // 图标名称
"include": "build/installer.nsh", //安装启动脚本删除 注册表信息
"runAfterFinish": false
},
// mac: {
// icon: './public/logo.icns',
// category: 'public.app-category.utilities', // 应用类型
// target: ['dmg'] // 打包的目标类型(默认是dmg和zip),支持很多类型
// },
// "win": { //win相关配置
// "icon": "nick.ico", //图标,当前图标在根目录下,注意这里有两个坑
// "target": [{
// "target": "nsis", //利用nsis制作安装程序
// "arch": [
// "x64", //64位
// "ia32" //32位
// ]
// }]
// },
},
}
}
};
3.命令行输入
yarn electron:build
如果出现打包失败,提示GitHub下载失败就打开这个网址:(我最开始一直打包提示下载失败,与某某某地址断开链接。打开网址就好了,不知道有没有关系)
https://github.com/electron-userland/electron-builder-binaries/releases