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"
  },

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值