B5net

人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

Electron+vue搭建项目或将vue项目转为electron

Published on:2022-06-08

主要的思想就是将通过electron的loadUrl加载vue项目访问地址
vue开发时的地址localhost:8080,

打包后的文件夹通过#模式访问


一、创建一个项目文件夹,例如electron_vue


二、在electron_vue下创建一个vue文件夹,里面为vue的项目代码


  1. 若使用路由,需要路由使用createWebHashHistory
  2. 将vue.config.js中的publicPath改为相对路径./
  3. 将vue.config.js中的打包路径到项目electron_vue下 outputDir: path.resolve(__dirname, '../dist')



三、在electron_vue文件夹下运行 npm init,初始化工程。并创建electron文件夹,存放electron代码


四、安装electron,cross-env,concurrently,electron-packager,最终生成如下 结构


npm install electron && npm install cross-env --save-dev && npm install concurrently --save-dev 

 && npm install electron-packager --save-dev


concurrently 用于并发执行命令,在打开开发环境时用到

cross-env 用于指定node的变量




五、在electron文件夹下创建main.js,基本代码如下


const { app, BrowserView, BrowserWindow } = require('electron')
const path = require('path')
app.whenReady().then(() => {
    createWindow()
})

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 400,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    //根据不同环境加载不同的地址
    if (process.env.NODE_ENV === 'development') {
        win.loadURL('http://localhost:8080/#/')
    } else {
        win.loadURL(path.resolve(__dirname, '../dist/index.html#/'))
    }
}

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


六、修改package.json配置,主要指定main和scripts如下

"main": "electron/main.js",
    "scripts": {
        "serve": "cd vue && npm run serve",
        "build": "cd vue && npm run build",
        "electron": "cross-env NODE_ENV=development electron .",
        "electron:serve": "concurrently \"npm run serve\" \"npm run electron\" ",
        "packager": "electron-packager ./ myproject --platform=win32 --out=./build --arch=x64 --app-version=1.0.1  --icon=./assets/icon/win.ico --ignore=\"(vue|build|assets)\"  --overwrite",
        "electron:build": "npm run build && npm run packager "
    },


执行 npm run electron:serve 就会打开软件以及运行vue实施开发
执行 npm run electron:build 会先打包vue代码,在打包electron代码


也可以将打包命令放到一个单独文件夹。例如

创建一个packager文件夹,执行npm init。然后安装electron-packager。

修改根文件夹的package.json如下,主要修改packager,让其跳转到packager目录下执行里面的命令,其他不变

 "scripts": {
        "packager": "cd packager && npm run packager"


packager文件夹下的package.json如下,主要注意路径

"scripts": {
        "packager": "electron-packager ../ 计算器 --platform=win32 --out=./build/packager --arch=x64 --app-version=1.0.1  --icon=./assets/icon/win.ico --ignore=\"(vue|build|packager)\"  --overwrite"
    },





当vue项目中使用electron的模块时,需要在vue项目页安装electron,并在vue.config.js中设置如下,否则可能报错

config.externals = {
    electron: 'require("electron")'
}


留言列表(1)

    留言

    B5net

    人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

    开源项目
    • B5LaravelCMF:基于laravel9+bootstrap3实现的快速开发后台
    • B5YiiCMF:基于Yii2+bootstrap3 实现的快速开发后台管理系统
    • B5ThinkCmf:基于ThinkPHP6+bootstrap3 实现的快速开发后台管理系统
    • B5VueCMF_H5:vue3.0 + Webpack/Vite + Vuex + VueRouter + Vant3 搭建快速开发基本Demo
    • See also:gitee.com@b5net
    最新评论
    奥德赛 on Electron+vue搭建项目或将vue项目转为electron :大声道奥术大师大声道
    cmf :我的qq 292864861
    cmf :你好 你的B5ThinkCMF下载后有点问题 能帮忙解决下么?
    laravel新手 :您好,laravel9+bootstrap3实现的快速开发后台,下载部署后,刷新加载,F12我看了下,我部署的是240毫秒左右,您部署的测试版本只有50毫秒左右,能辛苦指导下,如何优化lv吗,谢谢
    瀑布 :你好,yii我下载在本地后台,接口请求非常慢,通过debug我发现session_started执行时间很长,想问下这个是需要哪个地方配置吗?
    瀑布 :你好,今天看到你的开源项目,很喜欢,感谢你的开源
    冰舞 on Laravel定时任务的实现 :测试测试测试测试测试测试 测试测试测试测试测试测试测试测试测试测试
    文章分类