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

admin管理员组

文章数量:1328923

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.

• javascript
• web
• vuejs2
• electron
• desktop

Share Improve this question Follow edited Nov 12, 2017 at 22:02 ogostos asked Nov 12, 2017 at 18:56 ogostosogostos 1,49533 gold badges2020 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: 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

本文标签： javascriptHow to deploydistribute vue project as desktop appStack Overflow