vue + electron-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue + electron。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

node 版本 v14.19.3
npm 版本 6.14.17
要是node-sass报错执行命令：

npm uninstall node-sass sass-loader
npm i node-sass@4.14.1 sass-loader@7.3.1 --save -dev

首先安装依赖

npm install electron
npm install electron-packager

electronRun.js放在根目录下

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

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL('http://172.26.96.37:8011')
  //mainWindow.loadFile('dist/index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function() {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

根目录的vue.config.js
路由用mode:‘hash’

export default new Router({
  mode: 'hash', // https://router.vuejs.org/api/#mode
  linkActiveClass: 'open active',

把publicPath:‘./’,

package.json文件里面加package和main

{
  "name": "@coreui/coreui-free-vue-admin-template",
  "version": "2.1.5",
  "description": "Open Source Bootstrap Admin Template",
  "author": "Łukasz Holeczek",
  "main": "electronRun.js",
  "homepage": "http://coreui.io",
  "copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git@github.com:coreui/coreui-free-vue-admin-template.git"
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "package": "electron-packager ./ package --platform=win32 --arch=x64 --out=./out --app-version=0.0.1 --overwrite --ignore=node_modules"
  },