搭建vuebootstrap+electron项目

install vue cli

npm install -g @vue/cli

create vue project

vue create project_name

install electron

npm install --save-dev electron@latest

书写main.js

const { app, BrowserWindow } = require('electron')

const url = require("url")
const path = require("path")

let mainWindow

const winURL = `file://${__dirname}/dist/index.html`

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })

    mainWindow.loadURL(winURL);
    mainWindow.on('closed', function () {
        mainWindow = null
    })
}
console.log(app);
app.on('ready', createWindow)

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
    if (mainWindow === null) createWindow()
})

添加main和npm start

{
  "name": "electron-vue",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  "scripts": {
    "start" : "vue-cli-service build && electron .",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  // [...]
}

修改vue使用相对路径 create vue.config.js

module.exports  = {
    // this will tell Vue to use a relative path in production and an absolute path in development
    publicPath: process.env.NODE_ENV  ===  'production'  ?  './'  :  '/'
}

启动完成

npm start