support electron

.env.development

@@ -0,0 +1,3 @@
+NODE_ENV=development
+VUE_APP_NODE_ENV=dev
+VUE_APP_API_URL='http://pig-gateway:9999'

.gitignore

@@ -26,3 +26,6 @@ yarn-error.log*
 # Lock File
 package-lock.json
 yarn.lock
+
+#Electron-builder output
+/dist_electron 

package.json

@@ -7,8 +7,10 @@
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "build:docker": "vue-cli-service build --dest='./docker/dist/'",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "electron:dev": "vue-cli-service electron:serve"
   },
+  "main": "background.js",
   "dependencies": {
     "@riophae/vue-treeselect": "^0.4.0",
     "@smallwei/avue": "2.6.18",
@@ -18,13 +20,17 @@
     "babel-polyfill": "^6.26.0",
     "classlist-polyfill": "^1.2.0",
     "codemirror": "^5.58.1",
+    "core-js": "^2.6.12",
     "crypto-js": "^3.1.9-1",
+    "electron": "8.5.0",
+    "electron-devtools-installer": "3.1.0",
     "element-ui": "^2.13.2",
     "js-cookie": "^2.2.1",
     "nprogress": "^0.2.0",
     "script-loader": "^0.7.2",
     "vue": "^2.6.10",
     "vue-axios": "^2.1.4",
+    "vue-cli-plugin-electron-builder": "2.0.0-rc.4",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.1"
   },

src/background.js

@@ -0,0 +1,90 @@
+'use strict'
+
+import { app, protocol, BrowserWindow } from 'electron'
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+// 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 win
+
+// Scheme must be registered before the app is ready
+protocol.registerSchemesAsPrivileged([
+  { scheme: 'app', privileges: { secure: true, standard: true } }
+])
+
+function createWindow() {
+  // Create the browser window.
+  win = new BrowserWindow({
+    width: 1440,
+    height: 900,
+    webPreferences: {
+      // Use pluginOptions.nodeIntegration, leave this alone
+      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+      nodeIntegration: true,
+      webSecurity: false
+    }
+  })
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+    //if (!process.env.IS_TEST) win.webContents.openDevTools()
+  } else {
+    createProtocol('app')
+    // Load the index.html when not in development
+    win.loadURL('app://./index.html')
+  }
+
+  win.on('closed', () => {
+    win = null
+  })
+}
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On macOS 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', () => {
+  // On macOS 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 (win === null) {
+    createWindow()
+  }
+})
+
+// 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', async () => {
+  if (isDevelopment && !process.env.IS_TEST) {
+    // Install Vue Devtools
+    try {
+      await installExtension(VUEJS_DEVTOOLS)
+    } catch (e) {
+      console.error('Vue Devtools failed to install:', e.toString())
+    }
+  }
+  createWindow()
+})
+
+// Exit cleanly on request from parent process in development mode.
+if (isDevelopment) {
+  if (process.platform === 'win32') {
+    process.on('message', (data) => {
+      if (data === 'graceful-exit') {
+        app.quit()
+      }
+    })
+  } else {
+    process.on('SIGTERM', () => {
+      app.quit()
+    })
+  }
+}

src/config/env.js

@@ -1,11 +1,11 @@
 // 配置编译环境和线上环境之间的切换
 
 const env = process.env
-const baseUrl = ''
+const baseUrl = env.VUE_APP_API_URL
 // 图表库为avue和pig2套地址
 const iconfontVersion = ['567566_qo5lxgtishg', '667895_v7uduh4zui']
 const iconfontUrl = `//at.alicdn.com/t/font_$key.css`
-const codeUrl = `${window.location.origin}/code`
+const codeUrl = `${env.VUE_APP_API_URL}/code`
 
 export {
   baseUrl,

src/router/axios.js

@@ -7,7 +7,11 @@ import {Message} from 'element-ui'
 import 'nprogress/nprogress.css'
 import qs from 'qs'
 import store from "@/store"; // progress bar style
+import {baseUrl} from '@/config/env'
+
 axios.defaults.timeout = 30000
+axios.defaults.baseURL = baseUrl
+
 // 返回其他状态吗
 axios.defaults.validateStatus = function (status) {
   return status >= 200 && status <= 500 // 默认的

vue.config.js

@@ -3,7 +3,7 @@
  * https://cli.vuejs.org/zh/config/#%E7%9B%AE%E6%A0%87%E6%B5%8F%E8%A7%88%E5%99%A8
  *
  */
-const url = 'http://pig-gateway:9999'
+const url = process.env.VUE_APP_API_URL
 // 基础路径，发布前修改这里,当前配置打包出来的资源都是相对路径
 let publicPath = './'
 module.exports = {