最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to deploydistribute vue project as desktop app - Stack Overflow

programmeradmin7浏览0评论

I have a project made in VueJS. I've started from vue cli and almost finished the code. By npm run build I've created /dist folder with static folder and index.html. Now what I want is to convert web app into desktop app. It seems electron is what I need. However, after searching for instructions here and there, I'm not able to figure out where to start.

I have a project made in VueJS. I've started from vue cli and almost finished the code. By npm run build I've created /dist folder with static folder and index.html. Now what I want is to convert web app into desktop app. It seems electron is what I need. However, after searching for instructions here and there, I'm not able to figure out where to start.

Share Improve this question edited Nov 12, 2017 at 22:02 ogostos asked Nov 12, 2017 at 18:56 ogostosogostos 1,4953 gold badges20 silver badges30 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

some of the things I've used in the past...

  • nw.js https://nwjs.io/
  • electron https://electron.atom.io/
  • zeit-pkg https://github./zeit/pkg
  • nexe https://github./nexe/nexe

there are others out there, but I'd say that pkg was the easiest to use for creating a single executable, but it creates the largest files. Nexe is a bit more work to setup depending on your dependencies. nwjs and electron have a slightly more plex setup as-well, pared to a single pile mand, but they do give you more options.

I have used electron to make a desktop app. (https://electron.atom.io/)

Please follow the steps for basic setup with electron :

1) install electron globally using mand

npm install electron -g

2) Add this in your package.json

Make app.js as a entry file

package.json

"main": "app.js",
"scripts": {
"start": "electron ."
 },
"bin" : "./bin/my-bin.js"

3) app.js

// Electron Desktop app

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

let win;

function createWindow() {

win = new BrowserWindow({ icon: __dirname + '/images/brw.PNG', show: false 
})
win.maximize()
win.show()

win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'), //path to your index.html
    protocol: false,
    slashes: true
}));

win.webContents.openDevTools();

win.on('closed', () => {
    win = null;
});

}



app.on('ready', createWindow);

4) Add my-bin.js in app/my-bin.js directory

bin/my-bin.js

#!/usr/bin/env node

var join = require('path').join
var childProcess = require('child_process');
var args = process.argv.slice(2);

 args.unshift(__dirname + '/../'); 

childProcess.exec('npm start', (err, stdout) => {
if (err) console.log(err);
console.log(stdout);
})

5) Then, in current working directory,

Execute

npm start

Yay, It will open your desktop application window.

Cheers !!

Note : You can develop this without "bin" entry in package.json, but if you would wish to package your app usig zeit/pkg, you will need it since it reads from bin entry.

pkg is used to make distribute executable's,where we can make executable's without source code.(hidden source code). But currently there is an issue for distributing electron app with pkg https://github./zeit/pkg/issues/52

发布评论

评论列表(0)

  1. 暂无评论