https://blog.csdn.net/nodeman/article/details/110522520
主目录下加main.js
/* jshint esversion: 6 */
const electron = require('electron');
//const protocol = electron.protocol
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;
// const newWindowBtn = document.getElementById('frameless-window')
const path = require('path');
const url = require('url');
// 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() {
// 创建一个窗口,大小 800 * 600
mainWindow = new BrowserWindow({
height: 800,
useContentSize: true,
width: 1000
});
mainWindow.setMenu(null);
// 在窗口内要展示的内容为 ./dist/index.html,即打包生成的index.html
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './dist', 'index.html'),
protocol: 'file:',
slashes: true
}));
// 自动打开调试台
mainWindow.webContents.openDevTools({
detach: false
});
// 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.
// 回收BrowserWindow对象
session.defaultSession.clearStorageData(null,(any) => {
// in our case we need to restart the application
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);
app.on('ready', function(e) {
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.
package.json
{
"description": "electron desktop",
**"name": "cs-zjj-das-app",**
"version": "2.4.6",
"private": true,
"main": "main.js",
"author": "dszhang <dszhang@163.com>",
"license": "MIT",
**"build": {**
"appId": "com.delisun.das.zjjapp",
"copyright": "Copyright © 2019 delisun.com",
"productName": "长沙市行政管理系统",
"nsis": {
"oneClick": true,
"perMachine": true,
"runAfterFinish": true
},
"files": [
"dist/static",
"dist/*.html",
"dist/*.*",
"dist/cdn",
"dist/tinymce",
"*.js"
]
},
"scripts": {
"pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
"serve": "vue-cli-service serve",
"build:test": "vue-cli-service build --mode test",
"build": "vue-cli-service build",
"start": "electron .",
**"pack": "electron-builder --dir",**
"packager": "electron-packager . demo --out ./OutApp --app-version 2.4.6 --overwrite ",
**"dist": "electron-builder",**
"lint": "vue-cli-service lint"
},
"dependencies": {
"@antv/data-set": "^0.11.4",
"@jeecg/antd-online-mini": "2.4.6-beta1",
"@tinymce/tinymce-vue": "^2.1.0",
"@toast-ui/editor": "^2.1.2",
"ant-design-vue": "^1.7.2",
"axios": "^0.18.0",
"bpmn-js": "^7.2.1",
"bpmn-js-properties-panel": "^0.34.0",
"bpmn-moddle": "^6.0.0",
"china-area-data": "^5.0.1",
"clipboard": "^2.0.4",
"codemirror": "^5.46.0",
"cron-parser": "^2.10.0",
"dayjs": "^1.8.0",
"dom-align": "1.12.0",
"echarts": "^5.2.0",
"element-ui": "^2.15.6",
"enquire.js": "^2.1.6",
"file-saver": "^2.0.5",
"js-base64": "^3.7.2",
"js-cookie": "^2.2.0",
"lodash.get": "^4.4.2",
"lodash.pick": "^4.4.0",
"md5": "^2.2.1",
"normalize.css": "^7.0.0",
"nprogress": "^0.2.0",
"reqwest": "^2.0.5",
"script-loader": "^0.7.2",
"spark-md5": "^3.0.1",
"tinymce": "^5.3.2",
"viser-vue": "^2.4.8",
"vue": "^2.6.10",
"vue-area-linkage": "^5.1.0",
"vue-cropper": "^0.5.4",
"vue-i18n": "^8.7.0",
"vue-infinite-scroll": "^2.0.2",
"vue-loader": "^15.7.0",
"vue-ls": "^3.2.0",
"vue-photo-preview": "^1.1.3",
"vue-print-nb-jeecg": "^1.0.9",
"vue-router": "^3.0.1",
"vue-simple-uploader": "^0.7.4",
"vue-splitpane": "^1.0.4",
"vue-virtual-scroller": "^1.0.10",
"vue2-ace-editor": "^0.0.15",
"vuedraggable": "^2.20.0",
"vuex": "^3.1.0",
"vxe-table": "2.9.13",
"vxe-table-plugin-antd": "1.8.10",
"webpack": "^4.5.0",
"xe-utils": "2.4.8",
"xlsx": "^0.17.1"
},
"devDependencies": {
"@babel/polyfill": "^7.2.5",
"@vue/cli-plugin-babel": "^3.3.0",
"@vue/cli-plugin-eslint": "^3.3.0",
"@vue/cli-service": "^3.3.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "7.2.3",
"compression-webpack-plugin": "^3.1.0",
**"electron": "^18.0.0",**
**"electron-builder": "^22.14.13",
"electron-packager": "^15.4.0",**
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.1.0",
"html-webpack-plugin": "^4.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"sass": "^1.49.8",
"sass-loader": "^7.3.1",
"script-loader": "^0.7.2",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/strongly-recommended",
"@vue/standard"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"generator-star-spacing": "off",
"no-mixed-operators": 0,
"vue/max-attributes-per-line": [
2,
{
"singleline": 5,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}
],
"vue/attribute-hyphenation": 0,
"vue/html-self-closing": 0,
"vue/component-name-in-template-casing": 0,
"vue/html-closing-bracket-spacing": 0,
"vue/singleline-html-element-content-newline": 0,
"vue/no-unused-components": 0,
"vue/multiline-html-element-content-newline": 0,
"vue/no-use-v-if-with-v-for": 0,
"vue/html-closing-bracket-newline": 0,
"vue/no-parsing-error": 0,
"no-tabs": 0,
"indent": [
"off",
2
],
"no-console": 0,
"space-before-function-paren": 0
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}
vue.config.js修改 ,production 为 根目录
{
publicPath: process.env.NODE_ENV === 'production' ? './' : '/archive/',
}
路由配置修改route/index.js,模式改为hash,解决登录登出跳转与图片路径
为e:\\ 根目录问题。
import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap } from '@/config/router.config'
Vue.use(Router)
export default new Router({
//mode: 'history',
mode: 'hash',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
安装electron 开发依赖与打包依赖
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install --save-dev electron
cnpm install --save-dev electron-builder
打包运行
#编译,生成dist目录下编译文件
npm run build
#生成运行程序,双击运行
npm run pack
#生成安装包,双击安装
npm run dist