vue-cli3 用electron打包

2018-10-16  本文已影响0人  凝碧_0e80

网上的教程都是vue-cli2或者vue-electron的,没有关于cli3的文章,只能自己动手了。

electron-quick-start

git clone https://github.com/electron/electron-quick-start

运行

npm run start

vue-cli3

用vue-cli3新建一个项目,过程略过不说,
添加依赖

npm install --save-dev electron
npm install --save-dev electron-packager

然后把electron-quick-start下的main.js复制到vue-cli3的项目下,改名electron.js,
打开electron.js文件,修改

mainWindow.loadFile(`${__dirname}\\dist\\index.html`)//原文为mainWindow.loadFile('index.html')

把electron-quick-start下的package.json

"main": "main.js",
  "scripts": {
    "start": "electron ."
  }

内容添加到vue项目的package.json

 "main": "main.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron_dev": "yarn run build && electron electron.js"
  }

运行

yarn run electron_dev

就可以看到electron的界面了。

上一篇下一篇

猜你喜欢

热点阅读