electron-vue项目打包踩坑指南

electron-vue项目打包踩坑指南

分类专栏： ​​html+js+jquery+css​​​ ​​electron​​

​​前言：​​

这里是基于 之前搭建的一个​​vue​​​-cli+​​Electron​​项目做的相关配置。

项目地址： ​​= { 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' // 图标名称(项目名称) } } } }}

"build": { "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名 "appId": "com.leon.xxxxx",//包名 "copyright":"xxxx",//版权 信息 "directories": { // 输出文件夹 "output": "build": { "oneClick": false, // 是否一键安装 "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。 "allowToChangeInstallationDirectory": true, // 允许修改安装目录 "installerIcon": "./build/icons/aaa.ico",// 安装图标 "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标 "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标 "createDesktopShortcut": true, // 创建桌面图标 "createStartMenuShortcut": true,// 创建开始菜单图标 "shortcutName": "xxxx", // 图标名称 "include": "build/script/installer.nsh", // 包含的自定义nsis脚本: [ { "provider": "generic", // 服务器提供商 也可以是GitHub等等 "url": "// 服务器地址: [ "dist/electron/**/*": { "contents": [ { "x": 410, "y": 150, "type": "link", "path": "/Applications", "y": 150, "type": "file": { "icon": "build/icons/icon.icns": { "icon": "build/icons/aims.ico", "target": [ { "target": "nsis", "arch": [ "ia32": { "icon": "build/icons" } }

复制代码

1、路径中不要有中文

2、​​NPM​​下载的问题

因为​​NPM​​​在国内比较慢。导致​​electron-V.xxxx.zip​​​下载失败。这些东西如果是第一次打包的话是需要下载对应​​electron​​版本的支持文件。解决办法有两个

（1）设置镜像：在build里面加下面一段代码

"electronDownload": { "mirror": "（两个下划线开头），可以用来替代需要​​static​​的地方

如果dev或者web环境下​​__static​​​变量解析不正确，只需要自行修改对应运行环境下的​​__static​​​变量值就行了，例如dev环境下的​​__static​​应该改为：

复制代码//.electron-vue/webpack.renderer.config.jsif (process.env.NODE_ENV !== 'production') { //非最终产品环境,这里即为dev环境 rendererConfig.plugins.push( new webpack.DefinePlugin({ // '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"` '__static': JSON.stringify('./static') }) )}复制代码

​

5、打包后显示调试工具

mainWindow.webContents.openDevTools()

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。