当前位置: 代码迷 >> 综合 >> electron +vue 桌面端应用
  详细解决方案

electron +vue 桌面端应用

热度:30   发布时间:2023-12-11 19:14:23.0

electron有这么几种方式,第一种是利用官方的demo来进行构建,第二种是在vue 中引入electron,第三种是新建electron-vue项目。

demo下载地址

踩过的一些坑:
1.electron的项目不能使用history模式,也不能使用路由懒加载。
2.利用官方的demo来进行构建的话,elementUI的图标有显示异常的问题,iview的没有这个问题。新建electron-vue项目可以解决图标有显示异常的问题。

iview:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
一、利用官方的electron-quick-start

1.显示

利用官方的demo是最简单的方式,只要将项目打包后,替换demo的static和index.html即可。

先clone项目:

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

然后在自己的vue项目中修改路径,vuecli2.0修改assetsPublicPath,vue cli3.0+修改publicPath。如下:
在这里插入图片描述
在这里插入图片描述
再次运行npm run start,成功将vue的项目,显示为桌面应用。

2.打包

在package.json的scripts中添加如下代码:

"package": "electron-packager . mzk --platform=win32 --arch=ia32 --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules"

然后执行打包命令npm run package

以上为32位系统的打包命令

ia32, 即–arch=ia32, 32位操作系统,也可以在64位操作系统中安装

x64, 即–arch=x64, 64位操作系统,使用本架构打包无法在32位操作系统中安装

参数–platform和–arch已经被标志为过期,新的写法如下

electron-builder --win --x64
electron-builder --win --ia32
electron-builder --win --armv7l

二、在vue 中引入electron

这种方式是在有vue项目的情况下引入electron进来,再次强调,electron的项目不能使用history模式,不能使用history模式!

在vue 中引入electron也有几种方式,先来介绍最简单的一种方式:

1.vue 中引入electron方式一

(1)安装Electron

 npm install electron

(2)使用cnpm安装Electron

cnpm install -g electron

(3)看一下是否安装成功

electron -v

(4)创建主程序入口(main.js)和配置文件 package.json

main.js

const {
    app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {
    width:800,height:600
};//窗口配置程序运行窗口的大小
function createWindow(){
    win = new BrowserWindow(windowConfig);//创建一个窗口win.loadURL(`file://${
      __dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.htmlwin.webContents.openDevTools();  //开启调试工具win.on('close',() => {
    //回收BrowserWindow对象win = null;});win.on('resize',() => {
    win.reload();})
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
    app.quit();
});
app.on('activate',() => {
    if(win == null){
    createWindow();}
});

package.json

{
    "name": "ylemusic","productName": "ylemusic","author": "Yle","version": "1.0.0","main": "main.js",//主文件入口"description": "music","scripts": {
    "pack": "electron-builder --dir","dist": "electron-builder","postinstall": "electron-builder install-app-deps"},"build": {
    "electronVersion": "1.8.4","win": {
    "requestedExecutionLevel": "highestAvailable","target": [{
    "target": "nsis","arch": ["x64"]}]},"appId": "ylemusic","artifactName": "demo-${version}-${arch}.${ext}","nsis": {
    "artifactName": "demo-${version}-${arch}.${ext}"}},"dependencies": {
    "core-js": "^2.4.1","electron-builder": "^20.44.4","electron-package": "^0.1.0","electron-updater": "^2.22.1"}
}

在这里插入图片描述
(5) 在dist文件夹下执行:

electron .

就可以看到项目跑起来了

参考链接

2.vue 中引入electron方式二(最容易出问题)

(1)首先在vue项目的package.json中加入electron的依赖

npm install electron --save-dev 
npm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好

(2)把electron-quick-start项目中的main.js搬到vue的build文件中,并改个名字electron.js。

因为文件的相对位置进行了改变,electron的入口文件变成了vue build之后的文件地址,也就是dist文件夹下的 index.html,所以此时的electron.js 里面的引用地址也要变,即:

mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, '../dist/index.html'),protocol: 'file:',slashes: true}))

在package.json文件中增加一条指令,用来启动electron,即:

"scripts": {
    "dev": "node build/dev-server.js","start": "npm run dev","build": "node build/build.js","lint": "eslint --ext .js,.vue src","electron_dev": "npm run build && electron build/electron.js"},

electron_dev 就是用来启动electron的,在此之前我们一定要确保项目当中已经有构建好的静态资源文件,因此 在运行 electron build/electron.js 之前,首先运行 npm run build。

经过这样的处理,在命令行中,运行 npm run electron_dev之后,就会将之前在electron-quick-start中显示的桌面应用,再次显示出来。

(3)打包exe文件

首先,为之前下载好的electron-packager,增加一条启动命令。

 "scripts": {
    "dev": "node build/dev-server.js","start": "npm run dev","build": "node build/build.js","lint": "eslint --ext .js,.vue src","electron_dev": "npm run build && electron build/electron.js","electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./src/assets/favicon.ico --overwrite"},

接下来手动在dist文件夹下增加electron.js和package.json

(dist/下是要去拿package,然后再去找入口的js,最后才去找index.html.)

package的main指向从build文件夹中复制来的electron.js(记得把electron.js中index.html的路径做修改)

 mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),protocol: 'file:',slashes: true}))

再次运行npm run electron_build得到打包好的文件夹,找到其中的*.exe,双击运行,终于又出现了熟悉的画面。

三、新建electron-vue项目

官网链接

创建electron

# 如果你没有vue-cli的话需要全局安装
npm install -g vue-cli# 然后使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue my-project# 安装依赖
cd my-project
npm install # or yarn# 进入开发模式
npm run dev # or yarn run dev

顺利的话,会出现以下界面:
在这里插入图片描述
不顺利的话,可能会遇到这样的问题:
在这里插入图片描述

ERROR in Template execution failed: ReferenceError: process is not defined

解决办法是:

<% if (!process.browser) { %>
改成
<% if (!htmlWebpackPlugin.options.process.browser) { %>

在.electron-vue的webpack.renderer.config.js中:

new HtmlWebpackPlugin({
    filename: 'index.html',title: "这里配置页面标题",//在页面中就<%= htmlWebpackPlugin.options.title %>访问process: process, // 为了再ejs模板的语法中能访问process,那就把process挂到次配置中template: path.resolve(__dirname, '../src/index.ejs'),minify: {
    collapseWhitespace: true,removeAttributeQuotes: true,removeComments: true},nodeModules: process.env.NODE_ENV !== 'production'? path.resolve(__dirname, '../node_modules'): false
}),

最后附上一篇详细的讲解:
参考文章
讲解