0
点赞
收藏
分享

微信扫一扫

electron-vue项目打包踩坑指南

 

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

 

​前言:​

这里是基于 之前搭建的一个​​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' // 图标名称(项目名称)
}
}
}
}
}


"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": "http://xxxxx/" // 服务器地址
: [
"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": "https://npm.taobao.org/mirrors/electron/"
}

 

(2)直接下载后放入C盘(采用的这种)

  直接去淘宝镜像文件库找到对应的文件并下载,放到指定的目录下,​​electron​​​的淘宝​​镜像地址​​​:​​https://npm.taobao.org/mirrors/electron/​​​。下载完之后放到指定的文件。一般文件的地址在​​C:\Users\Administrator\AppData\Local\electron\Cache​​​。例如我要下载8.2.3版本的​​electron​​,那么找到镜像下得文件然后放到指定文件夹中。

electron-vue项目打包踩坑指南_github

 (3)​​NSIS​​下载问题

  如果你要打​​NSIS的​​​包还需要再下载​​nsis-resources-xxx​​​等等包。通过错误日志我们可以得到我们要下载得版本,一般错误中通常会展示​​github​​​下载地址,直接点开连接去下载。但是位置这次不一样了。因为这是​​electron-builder​​​的支持环境所以我们要放在​​C:\Users\Administrator\AppData\Local\electron-builder\cache\nsis\​​下了。

  一般情况下解决这些问题的思路就是,缺什么拿什么?。

electron-vue项目打包踩坑指南_ico_02

electron-vue项目打包踩坑指南_ico_03

 3、node-sass问题

  安装vs2017必须装C++模块,安装后重新下载node-sass

4、static/下资源无法加载问题

  在开发和产品阶段​​static​​​的路径是不一致的。这里官方提供了一个​​__static​​​的全局变量 (两个下划线开头),可以用来替代需要​​static​​的地方

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

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

 

 ​

 5、打包后显示调试工具

electron-vue项目打包踩坑指南_ico_04

  mainWindow.webContents.openDevTools()



举报

相关推荐

0 条评论