Electron整合VUE

mkdir electron-vue
cd electron-vue
npm init
# 安装时如果node install.js卡死，使用一下命令在安装
export ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
export ELECTRON_CUSTOM_DIR=8.0.1
npm i electron --save-dev
npm i electron-is-dev --save-dev
npm i concurrently wait-on --save-dev 

cd app/renderer/src/main
vue create main   # 创建react项目

整个项目结构

electron-vue
├── app
│?? ├── main
│?? │?? └── index.js
│?? └── renderer
│??     ├── pages
│??     │?? └── main   # VUE构建后的成果物
│??     └── src
│??         └── main
│??             ├── README.md
│??             ├── babel.config.js
│??             ├── package-lock.json
│??             ├── package.json
│??             ├── public
│??             │?? ├── favicon.ico
│??             │?? └── index.html
│??             ├── src
│??             │?? ├── App.vue
│??             │?? ├── assets
│??             │?? │?? └── logo.png
│??             │?? ├── components
│??             │?? │?? └── HelloWorld.vue
│??             │?? ├── main.js
│??             │?? ├── router
│??             │?? │?? └── index.js
│??             │?? ├── store
│??             │?? │?? └── index.js
│??             │?? └── views
│??             │??     ├── About.vue
│??             │??     └── Home.vue
│??             └── vue.config.js
├── package-lock.json
└── package.json

pageage.json

{
  "name": "electron-vue",
  "version": "1.0.0",
  "description": "",
  "main": "app/main/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "concurrently \"npm run start:render\" \"wait-on http://localhost:8080 && npm run start:main\" ",
    "start:main": "electron .",
    "start:render": "cd app/renderer/src/main && npm run serve"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "concurrently": "^5.1.0",
    "electron": "^8.0.1",
    "electron-is-dev": "^1.1.0",
    "wait-on": "^4.0.0"
  }
}

app/main/index.js

const { app, BrowserWindow } = require('electron')
const isDev = require('electron-is-dev');
const path = require('path')

let win 
function createWindow() {
    win = new BrowserWindow({
        width: 800,
        height: 600
    })     

    if (isDev) {
        win.loadURL('http://localhost:8080')
    } else {
        win.loadFile(path.resolve(__dirname, '../renderer/pages/main/index.html'))
    }
}

app.on('ready', createWindow)

修改VUE Router模式为Hash模式
修改Vue.config.js 文件

module.exports = {
    outputDir: '../../pages/main',
    publicPath: './'
}

参考

https://github.com/warriorg/electron-vue

Electron整合VUE

原文：https://www.cnblogs.com/warrior/p/12348893.html