npm run dev:all :)

.env

@@ -0,0 +1,2 @@
+# vite 服务器端口
+PORT=3344

.gitignore

@@ -1,4 +1,6 @@
 node_modules
 .DS_Store
 dist
-*.local
+*.local
+src/main/_.js
+src/main/_.js.map

.yarnrc

@@ -0,0 +1 @@
+electron_mirror https://npm.taobao.org/mirrors/electron/

README.md

@@ -1,2 +1,7 @@
 # electron-vue-vite
 Electron、vue、vite 整合
+
+## How and Why
+- 写这个 Demo 项目主要有两个目的
+  1. `vue@3.x` 发布了，想试试新功能
+  2. 工作中用的 `umi`+`electron` 项目大了，启动速度并不理想；用 `vite` 试试，算一个储备方案 ^_^

package.json

@@ -1,15 +1,36 @@
 {
   "name": "electron-vue",
-  "version": "0.0.0",
+  "version": "0.0.1",
+  "main": "src/main/_.js",
+  "author": "草鞋没号 <308487730@qq.com>",
+  "license": "MIT",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build"
+    "dev": "npm run dev:all",
+    "dev:all": "concurrently -n=vue,ele -c=green,blue \"npm run vue:dev\" \"npm run ele:dev\"",
+    "vue:dev": "vite",
+    "vue:build": "vite build",
+    "ele:build": "node script/build --env=production",
+    "ele:dev": "node script/build --env=development --watch"
   },
   "dependencies": {
     "vue": "^3.0.0-rc.1"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-typescript": "^5.0.2",
+    "@vue/compiler-sfc": "^3.0.0-rc.1",
+    "chalk": "^4.1.0",
+    "concurrently": "^5.3.0",
+    "dotenv": "^8.2.0",
+    "electron": "9.1.0",
+    "electron-builder": "^22.8.0",
+    "electron-connect": "^0.6.3",
+    "electron-is-dev": "^1.2.0",
+    "minimist": "^1.2.5",
+    "ora": "^5.0.0",
+    "typescript": "^3.9.7",
     "vite": "^1.0.0-rc.1",
-    "@vue/compiler-sfc": "^3.0.0-rc.1"
+    "wait-on": "^5.2.0"
   }
-}
+}

script/build.js

@@ -0,0 +1,53 @@
+/**
+ * electron 打包
+ */
+const path = require('path');
+const rollup = require('rollup');
+const argv = require('minimist')(process.argv.slice(2));
+const chalk = require('chalk');
+const ora = require('ora');
+const waitOn = require('wait-on');
+const electron = require('electron-connect').server.create({ stopOnClose: true });
+require('dotenv').config({ path: path.join(__dirname, '../.env') })
+const options = require('./rollup.config');
+
+const opt = options(argv.env);
+const TAG = '[script/build.js]';
+const spinner = ora(`${TAG} Electron build...`);
+
+if (argv.watch) {
+  waitOn({
+    resources: [`http://localhost:${process.env.PORT}`],
+    log: false,
+  }, err => {
+    if (err) {
+      console.log(err);
+      process.exit(1);
+    }
+
+    // once here, all resources are available
+    const watcher = rollup.watch(opt);
+    watcher.on('change', filename => {
+      const log = chalk.green(`change -- ${filename}`);
+      console.log(TAG, log);
+    });
+    watcher.on('event', ev => {
+      if (ev.code === 'END') {
+        // init-未启动、started-第一次启动、restarted-重新启动
+        electron.electronState === 'init' ? electron.start() : electron.restart();
+      }
+    });
+  });
+} else {
+  spinner.start();
+  rollup.rollup(opt)
+    .then(build => {
+      spinner.stop();
+      console.log(TAG, chalk.green('Electron build successed.'));
+      build.write(opt.output);
+    })
+    .catch(error => {
+      spinner.stop();
+      console.log(`\n${TAG} ${chalk.red('构建报错')}\n`, error, '\n');
+    });
+}

script/rollup.config.js

@@ -0,0 +1,27 @@
+const path = require('path');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
+const typescript = require('@rollup/plugin-typescript');
+
+module.exports = (env = 'production') => {
+  return {
+    input: path.join(__dirname, '../src/main/index.ts'),
+    output: {
+      file: path.join(__dirname, '../src/main/_.js'),
+      format: 'cjs',
+      name: 'ElectronMainBundle',
+      sourcemap: true,
+    },
+    plugins: [
+      nodeResolve({ jsnext: true, preferBuiltins: true, browser: true }), // 消除碰到 node.js 模块时⚠警告
+      commonjs(),
+      typescript(),
+    ],
+    external: [
+      'fs',
+      'path',
+      'electron',
+      'electron-is-dev',
+    ],
+  }
+};

src/App.vue

@@ -1,15 +0,0 @@
-<template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3.0 + Vite" />
-</template>
-
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/main/index.ts

@@ -0,0 +1,27 @@
+/**
+ * electron 主文件
+ */
+import { join } from 'path'
+import { app, BrowserWindow } from 'electron'
+import is_dev from 'electron-is-dev'
+import dotenv from 'dotenv'
+
+dotenv.config({ path: join(__dirname, '../../.env') })
+
+let win = null
+
+function createWin() {
+  // 创建浏览器窗口
+  win = new BrowserWindow({
+    width: 1024,
+    height: 768,
+  })
+
+  const URL = is_dev
+    ? `http://localhost:${process.env.PORT}` // vite 启动的服务器地址
+    : `file://${join(__dirname, '../render/dist/index.html')}` // vite 构建后的静态文件地址
+
+  win.loadURL(URL)
+}
+
+app.whenReady().then(createWin)

src/render/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="logo-box">
+    <img style="height:200px;" src="./assets/electron.png" alt="Electron logo">
+    <img alt="Vue logo" src="./assets/logo.png" />
+  </div>
+  <HelloWorld msg="Hello Electron 9.0 + Vue 3.0 + Vite" />
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+
+<style>
+.logo-box {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+</style>

src/render/index.html

@@ -8,6 +8,6 @@
 </head>
 <body>
   <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
+  <script type="module" src="/main.js"></script>
 </body>
 </html>

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "jsx": "react",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "baseUrl": "./",
+    "strict": true,
+    "paths": {
+      "@/*": ["src/render/*"],
+      "root/*": ["/*"]
+    },
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "src/**/*",
+    "typings/*.d.ts"
+  ]
+}

vite.config.ts

@@ -0,0 +1,15 @@
+/**
+ * 参考链接: https://github.com/vitejs/vite/blob/master/src/node/config.ts
+ */
+import { join } from 'path'
+import { UserConfig } from 'vite'
+import dotenv from 'dotenv'
+
+dotenv.config({ path: join(__dirname, '.env') })
+
+const config: UserConfig = {
+  root: join(__dirname, 'src/render'),
+  port: +process.env.PORT,
+}
+
+export default config