Electron+Vue开发环境的搭建教程

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值