使用electron将vue项目打包为web或者是app应用

1.vue中添加electron 和 electron-package

cnpm install electron --save-dev

cnpm install electron-packager --save-dev  //这个是打成exe文件的插件，之后要用，提前下载好

2. vue项目中package.ison文件中“scripts”添加

[code]"electron_dev": "npm run build && electron build/electron.js",

"electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./favicon.ico --overwrite"

 Tip:"electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./favicon.ico --overwrite"中的相对路径不能错

[code]关于electron-packager的配置，简单介绍一下。
electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]
sourcedir 资源路径，在本例中既是./dist/
appname 打包出的exe名称
platform 平台名称（windows是win32）
arch 版本，本例为x64
后边的配置项都是选填，可以设置二进制打包等，默认是没有这些的，这里只选填了exe的图标。

3. Tip:config/index.js中  应设置assetsPublicPath: './',

[code]build: {
sitEnv: require('./sit.env'),
prodEnv: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',          //请根据自己路径配置更改
staticPath:'./static/',          //请根据自己路径配置更改
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},

 4.运行npm run build 在dist文件中将electron.js和package.json copy进去

[code]// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})

// and load the index.html of the app.
mainWindow.loadFile('index.html')

// Open the DevTools.
// mainWindow.webContents.openDevTools()

// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

在electron.js中应该注意mainWindow.loadFile('index.html')的路径问题。

[code]{
"name": "WZ",
"version": "1.0.0",
"description": "WZ base on Vue.js",
"author": "herozhou <zhouhero@hotmail.com>",
"license": "MIT",
"private": false,
"main":"electron.js",
"scripts": {
"dev": "node build/dev-server.js",
"build:prod": "cross-env NODE_ENV=production node build/build.js",
"build:sit": "cross-env NODE_ENV=sit node build/build.js",
"build:sit-preview": "cross-env NODE_ENV=sit npm_config_preview=true  npm_config_report=true node build/build.js",
"lint": "eslint --ext .js,.vue src"
},
"dependencies": {
"async-validator": "^1.7.1",
"axios": "0.16.2",
"deepmerge": "^1.5.0",
"iview": "^2.3.0",
"jquery": "3.1.1",
"js-cookie": "2.1.4",
"mavon-editor": "^2.2.4",
"mockjs": "1.0.1-beta3",
"normalize.css": "3.0.2",
"nprogress": "0.2.0",
"popper.js": "^0.6.4",
"vue": "2.3.3",
"vue-echarts": "^2.4.0",
"vue-json-tree-view": "^2.0.7",
"vue-router": "2.5.3",
"vue-tinymce": "github:lpreterite/vue-tinymce",
"vuex": "2.3.1"
},
"devDependencies": {
"autoprefixer": "7.1.1",
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-loader": "7.0.0",
"babel-plugin-transform-runtime": "6.23.0",
"babel-preset-env": "1.5.2",
"babel-preset-stage-2": "6.24.1",
"babel-register": "6.24.1",
"chalk": "1.1.3",
"commander": "^2.11.0",
"connect-history-api-fallback": "1.3.0",
"copy-webpack-plugin": "4.0.1",
"cross-env": "5.0.1",
"css-loader": "0.28.4",
"electron": "^2.0.5",
"electron-packager": "^12.1.0",
"eslint": "3.19.0",
"eslint-friendly-formatter": "3.0.0",
"eslint-import-resolver-webpack": "0.8.1",
"eslint-loader": "1.7.1",
"eslint-plugin-html": "3.0.0",
"eslint-plugin-import": "2.3.0",
"eventsource-polyfill": "0.9.6",
"express": "4.15.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"friendly-errors-webpack-plugin": "1.6.1",
"fs.extra": "^1.3.2",
"function-bind": "1.1.0",
"html-webpack-plugin": "2.28.0",
"http-proxy-middleware": "0.17.4",
"node-sass": "^4.5.0",
"opn": "4.0.2",
"optimize-css-assets-webpack-plugin": "1.3.0",
"ora": "1.1.0",
"pushstate-server": "2.1.0",
"rimraf": "2.6.0",
"sass-loader": "6.0.5",
"script-loader": "0.7.0",
"semver": "5.3.0",
"style-loader": "0.17.0",
"url-loader": "0.5.8",
"vue-loader": "12.2.1",
"vue-style-loader": "3.0.1",
"vue-template-compiler": "2.3.3",
"webpack": "2.6.1",
"webpack-bundle-analyzer": "2.8.2",
"webpack-dev-middleware": "1.10.2",
"webpack-hot-middleware": "2.18.0",
"webpack-merge": "4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserlist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

 复制的package.json文件中应该添加"main":"electron.js"

到这一步就离成功不远了。只需要再执行npm run electron_build就可以看到打包后的应用了。点击.exe文件就可以正常访问了

last：打包os系统：--platform=win32；Linux系统：--platform=linux；