准备工作
1、安装nodejs
2、配置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安装git
以上都是前端工程师基本的操作了这里不赘述,不清楚的百度即可
1、全局安装electron及electron-packager
全局安装electron ; 全局安装electron-packager,用于打exe包
cnpm install electron -g
cnpm install electron-packager -g
2、git下载官方示例并运行
在某一个目录下右键,点击“Git Bash Here”
依次执行以下命令,克隆示例后进入示例文件夹并用淘宝镜像安装依赖包(也可以直接用npm,但是会慢很多),运行项目
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
cnpm install
npm run start
会出现以下界面,表示运行成功
3、修改vue项目vue.config.js并构建
由于我们以往构建的vue项目是需要放在服务器上,一般不能够在本地直接打开index.html,其中的原因主要是静态文件的引用路径问题。
以vue-cli脚手架的vue.config.js为例
将publicPath修改为“./”
cd到vue项目根路径。执行npm run build,生成dist文件夹,此时我们直接在文件管理器中双击index.html,可以直接打开项目
将dist文件夹下的所有内容复制到electron-quick-start示例根路径下,覆盖原有index.html
在此目录下运行
npm run start
会发现我们的项目已经显示在桌面应用窗口中
4、打exe包
在pakage.json中的scripts中添加以下命令
"build": "electron-packager . myapp --out myapp --arch=x64 --overwrite --ignore=node_modules"
说明
electron-packager . 应用名称 --out 输出文件夹 --arch=x64 --overwrite --ignore=node_modules
打开cmd终端,执行npm run build
npm run build
打包后如图
双击myapp.exe即可打开桌面应用
以上,感谢观看