尝试加入electron打包

build/build-electron-plugin.js

+// 用于打包时在dist目录中输出electron.js和package.json
+const fs = require('fs')
+const path = require('path')
+
+class BuildElectronPlugin {
+  apply(compiler) {
+    compiler.plugin('emit', (compilation, callback) => {
+      const filename = path.join(__dirname, '../electron.js')
+      const outFilename = (filename.split('/')).pop()
+
+      new Promise((resolve, reject) => {
+        fs.readFile(filename, (err, data) => {
+          if (err) {
+            reject(err)
+          } else {
+            resolve(data)
+          }
+        })
+      }).then(res => {
+        const jsonText = `{"main": "${outFilename}"}`
+        compilation.assets[outFilename.toString()] = {
+          source () {
+            return res;
+          },
+          size () {
+            return fs.statSync(filename).size;
+          }
+        }
+        compilation.assets['package.json'] = {
+          source () {
+            return jsonText
+          },
+          size () {
+            return jsonText.length
+          }
+        }
+      })
+      callback();
+    });
+  }
+}
+
+module.exports = BuildElectronPlugin;

build/utils.js

@@ -47,6 +47,7 @@ exports.cssLoaders = function (options) {
     if (options.extract) {
       return ExtractTextPlugin.extract({
         use: loaders,
+        publicPath: '../../',
         fallback: 'vue-style-loader'
       })
     } else {

build/webpack.prod.conf.js

@@ -10,6 +10,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const BuildElectronPlugin = require('./build-electron-plugin')
 
 const env = require('../config/prod.env')
 
@@ -28,6 +29,7 @@ const webpackConfig = merge(baseWebpackConfig, {
     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
   },
   plugins: [
+    new BuildElectronPlugin(),
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
     new webpack.DefinePlugin({
       'process.env': env
@@ -46,7 +48,7 @@ const webpackConfig = merge(baseWebpackConfig, {
       filename: utils.assetsPath('css/[name].[contenthash].css'),
       // Setting the following option to `false` will not extract CSS from codesplit chunks.
       // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
-      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
       allChunks: true,
     }),

config/index.js

@@ -50,7 +50,7 @@ module.exports = {
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',
 
     /**
      * Source Maps

electron.js

+const {app, BrowserWindow} = require('electron')
+const url = require('url')
+const path = require('path')
+let win
+
+function createWindow() {
+  // const file = 'index.html'
+  win = new BrowserWindow({})
+  win.maximize()
+  win.setResizable(false)
+  // win.loadURL(url.format({
+  //   pathname: path.join(__dirname, file),
+  //   protocol: 'file:',
+  //   slashes: true,
+  // }))
+  // win.webContents.openDevTools()
+  win.loadFile('./index.html')
+  win.on('closed', () => {
+    win = null
+  })
+}
+
+app.on('ready', createWindow)
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (win = null) {
+    createWindow()
+  }
+})

index.html

@@ -7,7 +7,7 @@
     <title>dashboard</title>
     <style>
       html {
-        font-size: 0.8vw;
+        font-size: 1vw;
       }
     </style>
   </head>

package.json

@@ -7,8 +7,11 @@
   "scripts": {
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
+    "electron": "electron electron.js",
     "lint": "eslint --fix --ext .js,.vue src",
-    "build": "node build/build.js"
+    "build": "node build/build.js",
+    "build:mac": "node build/build.js && electron-packager ./dist dashboard --platform=mas --electron-version=6.1.0 --overwrite",
+    "build:win": "node build/build.js && electron-packager ./dist dashboard --platform=win32 --electron-version=6.1.0 --overwrite"
   },
   "dependencies": {
     "babel-polyfill": "^6.26.0",
@@ -34,6 +37,8 @@
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
+    "electron": "^3.0.11",
+    "electron-packager": "^13.0.0",
     "eslint": "^4.15.0",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^1.7.1",

src/components/MonitorCard/monitor-card.vue

@@ -30,10 +30,11 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-$edgeWidth = -0.1rem
+$edgeWidth = 0
 .card-wrapper
   background $cardBg
-  border $cardBorder
+  // border $cardBorder
+  box-shadow inset 0 0 0.8rem rgba(100,200,255,0.5)
   width 100%
   height 100%
   padding 0.5rem 1rem

src/views/main.vue

@@ -113,10 +113,11 @@ export default {
     'box2 box3 box4'\
     'box5 box3 box4'\
     'box6 box6 box6'
-  grid-template-rows auto 3fr 3fr 2fr
+  grid-template-rows 4rem auto auto 9rem
+  // grid-template-rows auto 3fr 3fr 2fr
   grid-template-columns 1fr 1fr 1fr
-  grid-gap 0.8rem
-  padding 1rem
+  grid-gap 0.7rem
+  padding 0.7rem
   .box1
     grid-area box1
   .box2