vue + electron

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

npm uninstall node-sass sass-loader
npm i [email protected] [email protected] --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": "[email protected]: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"
  },

打包程序npm run build 生成dist文件
然后在执行npm run package
看见项目有out文件夹,里面有个exe,执行(项目要运行起来,在执行exe)

你可能感兴趣的:(vue.js,electron,前端)