设置镜像
NPM镜像
1 | npm config set registry https://registry.npm.taobao.org |
还原默认
1 | npm config set registry https://registry.npmjs.org |
Electron镜像
查看配置文件的位置
1 | npm config list |
可以查看到本机的userconfig
在哪,即.npmrc
文件在哪
比如我的
userconfig C:\Users\Jian.npmrc
打开该文件 添加
1 | registry=https://registry.npm.taobao.org |
Vue CLi3环境配置
卸载旧版本
1 | npm uninstall vue-cli -g |
安装新版本
1 | npm install -g @vue/cli |
检查其版本是否正确 (3.x)
1 | vue --version |
electron-builder
新项目添加依赖
1 | vue ui |
安装插件
vue-cli-plugin-electron-builder
插件官网地址: https://nklayman.github.io/vue-cli-plugin-electron-builder/
选择Electron版本为5.0.0
Electron
5.0
和6.0
的语法变化不大 选用5.0
是因为node-ffi
第三方修改版也只能支持到5.0
运行报错
INFO Launching Electron…
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT
这是因为Devtools的安装需要翻墙
注释掉src/background.js
中的以下代码就行了
1 | if (isDevelopment && !process.env.IS_TEST) { |
虽然还是会报错 但是不用等它尝试下载那么多次了 不用管这个错误即可
旧项目添加依赖
开发依赖添加
1 | "devDependencies": { |
运行脚本添加
1 | "scripts": { |
入口变成了background.js
在src目录下创建background.js
1 | ; |
就项目中的Electron中的静态页面建议放在public文件夹中
打包配置
我们使用的vue-cli-plugin-electron-builder内部也是用electron-builder打包的,但是配置的位置不能像之前那样配置了
官方:https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/configuration.html
使用vue-cli-plugin-electron-builder的配置
在项目的根目录中的vue.config.js
中添加以下配置
项目中没有发现vue.config.js这个文件,这是由于vue-cli3.0是号称0配置的,所以我们自己在根目录下创建一个vue.config.js文件即可。注意!根目录!!!!
配置如下
1 | module.exports = { |
注意事项
- 图标的路径是相对于
vue.config.js
所在目录的相对位置,也就是说图标要放在项目的根目录,不是构建生成后目录的路径。app.ico 至少为 256x256 LICENSE.txt
文件的编码必须为GBK编码
页面加载方式
之前直接用Electron
写的代码,后来要结合Vue Cli3
创建的项目,本来想的是直接把Electron
的代码放在Vue的public
目录中,加载的时候用下面的方式
1 | if (process.env.WEBPACK_DEV_SERVER_URL) { |
但是发现开发环境中完全没问题,打包后就各种找不到依赖
所以这种方式是行不通的,只能把Electron中的静态页面用Vue的方式在写一遍
但是问题是Electron中用的Node,包导入导出用的CommonJS规范,而Vue用的是ES6的规范,所以代码也要微改。
原写法
1 | exports.mydb = mydb; |
改为
1 | export default mydb; |
加载页面方式改为
1 | if (process.env.WEBPACK_DEV_SERVER_URL) { |
loadFile
全部改为了loadURL
加载项目内文件
假如我们的项目下文件的位置为:/public/wordlist.txt
1 | readFileToArr(fReadName, callback) { |
这样在开发时我们能访问到,但是打包后它会从程序的根目录中查找/public/wordlist.txt
,但是文件的位置并不在此处,我们就要设置文件的位置
1 | module.exports = { |
其中主要配置
1 | extraResources: { |
小贴士
如果是electron-vue ,在vue中使用
process.cwd()
方法可以读取到打包后的根目录path,不过默认也是从项目根目录算起。
如
1 | let file = process.cwd() + 'config.json'; |
ffmpeg
调用二进制文件(FFMPEG)
Electron默认是开启asar的,导致二进制文件也被打在了asar文件中,就不能再被调用,所以我们要让二进制文件不被处理。
首先我们要知道程序的打包步骤
webpack打包
=> electron-builder打包
(asar打包
=> exe打包
)
考虑到不同平台需要打入的ffmpeg不同,我们可以在webpack打包
过程中筛选使用的文件,过程如下:
如果软件
不考虑多平台
,那么可以直接下载对应平台的ffmpeg放在项目根目录下的core文件夹中,下面的第一步可以跳过
不用配置。
第一步
安装ffmpeg-static
和copy-webpack-plugin
1 | npm install --save-dev ffmpeg-static |
配置vue.config.js
把对应平台的文件放在项目根目录的core文件夹中
1 | const path = require("path"); |
第二步
在配置electron-builder打包
过程,让ffmpeg放在指定位置
还是配置vue.config.js
1 | module.exports = { |
主要就是添加了
1 | extraResources: { |
第三步
调用时对应的路径
1 | import { resolve } from "path"; |
获取Windows音视频输入设备
1 | ffmpeg -list_devices true -f dshow -i dummy |