使用vue + electron + vite初始化项目

最近得知QQ将使用Electron来重构其项目,加上前段时间开发了一个在浏览器上使用threejs运行3D模型的项目,用户喜欢使用IE来运行我们的项目或其网速达到了惊人的100k的速度,使用户无法打开页面或打开页面时间过长的现状,就萌生了大胆的想法,使用electron来使我们开发过的项目打包成桌面应用,这样用户就不纠结为什么只能使用谷歌或火狐打开项目了,且前端的图片、模型等资源均在本地,不需要占用宝贵的流量,真是一举多得的好处,于是就尝试着使用vue+electron来创建一个桌面应用。当然在创建过程中也是各种各样的坑,好在通过百度搜索、潜伏到技术群偷技术、及自己不断的debug查找问题,最终算百成功搭建了一个可以运行的框架,遂写出来方便有和我一样的需要的同事们相互借鉴。当然,如果看到有不适的配置,请帮忙指出,谢谢。

开始前准备

本项目使用了 VUE3electron 需要提前安装好的工具有:NodeJs,vue-cli,和可能用到的nvm
如果你以前开发过vue项目,且正在开发或维护着vue2的项目,则最好需要安装nvm工具来管理多个node版本,因为vue2的最高版本和electron运行所需的node的最高版本可能存在着版本冲突。通过nvm可以很方便的切换node版本。

1. 安装node

前往nodejs官网下载合适版本的nodejs,下载msi文件后,最好安装在指定版本的node目录中,这样可以实现多个版本共存。electron最新版本至少运行在node 18.17.1以上。
如果使用nvm来管理node版本,请忽略此步骤。

electron版本node版本最低chrome版本
v1114.16.0v87
v1214.16.0v89
v1314.16.0v91
v1414.16.0v93
v1516.5.0v94
v1616.9.1v96
v1716.13.0v98
v1816.13.2v100
v2618.16.1v116

2. 安装vue-cli

在已经安装过node之后,打开终端,运行下面命令

# 安装vue-cli
npm i -g vue-cli

# 检测vue版本
vue --version

3. 安装nvm

前往nvm官网下载地址下载最新版本的nvm,下载zipexe均可,然后按提示安装即可。在安装前,请先卸载已经安装好的node版本,否则会可能出现node版本对了,npm的版本不对。如果没有设置自定义安装路径和nodejs安装路径时,nvm的安装位置应该是在C:\Users\Administrator\AppData\Roaming\nvm,实际安装位置在安装时请留心一下即可。
使用步骤:
安装完成后,打开终端,输入下面的命令安装和管理node版本。

# 安装node v18.16.1
nvm install 18.16.1

# 查看已经安装过的node列表,如果应用了的版本,其前面会有 * 号
nvm list

# 卸载指定版本的node
nvm uninstall 18.16.1

# 使用指定版本的node作用当前开发环境
nvm use 18.16.1

# 其他命令 输入nvm 即可查看说明

初始化 vite + Vue项目

vue项目的初始化有两种方式 ,下面使用哪种都行,我更喜欢使用后者,因为我们可以自动选择好vue-router、vuex/pinia等其他工具

  1. 使用vite来初始化一个vue项目
# 初始化一个vite项目,选择使用的框架,生成的项目名,也可以选择语言模板
npm create vite@latest vue-app-name

# 如果使用ts语言
npm create vite@latest vue-app-name -- --template vue-ts

# 进入到项目目录
cd vue-app-name

# 安装依赖
npm i

# 运行项目,在浏览器中打开项目,证明上面的步骤没有问题
npm run dev
  1. 或者使用下面的命令自定义安装
# 初始化vue项目
npm init vue@latest
# 根据自己的实际需要选择vue项目的技术栈,如选择vue版本,选择vuex或pinia,是否使用vue-router等

cd app_name_dir

npm install 

npm run dev

安装Electron相关包

# 安装electon
npm i electron -D

# 安装electron-builder,它主要用于打包项目
npm i electron-builder -D

# 安装electron-devtools-installer,它主要用于我们开发和调试electron
npm i electron-devtools-installer -D

# 安装vite-plugin-electron, 该 包已经集成了vite和electron,它可以方便我们在渲染过程中使用nodeAPI或Electron API
# 注意:这里固定了vite-plugin-electron的版本,如果不固定,运行时他出错,打包不能进行。
npm i vite-plugin-electron@0.8.3 -D

# 安装rimraf,它辅助我们快速删除文件和文件夹
npm i rimraf -D

相关工具的官网:
electron-devtools-installer
vite-plugin-electron

创建主进程

electron项目的启动,需要一个入口程序main.js,所以,我们需要手动为electron也创建一个入口文件,为了方便管理,我们在项目的根目录上创建electron目录,并创建main.js文件,写上electron启动的相关代码:

const { app, BrowserWindow, IpcMain } = require('electron');
const path = require('path');
// 创建窗口函数
function createWindow() {
  // 判断当前是在开发环境还是在生产环境
  const baseURL = process.env.NODE_ENV === 'development' ? `http://${process.env.VITE_DEV_SERVER_HOST}:${process.env.VITE_DEV_SERVER_PORT}` : `file://${path.join(__dirname, '../')}/dist/index.html`
  let win = new BrowserWindow({
    width: 500,  // 窗口宽度
    height: 600,  // 窗口高度
    webPreferences: {
      contextIsolation: false,    // 是否开启隔离上下文, 根据需要,如果设置为false,则无法使用ipc进程间的通信
      nodeIntegration: true,      // 渲染进程使用nodejs
      preload: path.join(__dirname, 'electron', 'preload.js')    // 预加载脚本,注意,后面会面electron目录下创建preload.js文件
    }
  });

  // 如果需要打开指定的路由页面,可以在baseURL后拼接上路由地址,如:baseURL + '#/index'
  win.load(baseURL);
}

// 注意whenReady返回的是一个promise对象
app.whenReady().then(() => {
  createWindow();
  // 对于macOS而言,关闭了全部的窗口并不会使app退出,所以,再打开app,则不会再次触发whenReady方法,需要在activate中监听,如果没有已打开的窗口,则创建新窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  })
})
// 当窗口全部关闭了,如果不是macOS,需要将app退出。
app.on('window-all-closed', () => {
  if (process.platform !== 'darkwin') {
    app.quit();
  }
});

创建预加载脚本

在electron目录下创建预加载脚本preload.js,当然,这个目录是自定义的,需要与上 面的preload选项匹配即可
请不要试图使用import xxx from xxx的方式引入指定的工具或插件,否则会报错。

const os = require('os');

console.log(os);

修改tsconfig.json

如果我们选择了ts语言,需要配置tsconfig.json,因为生成的文件中只包含了src目录下的文件,而不会处理electron目录下的文件,在include选项中添加这些选项。如果选择的语言为js,则无需此处修改。

"include": [
  "src/**/*.ts",
  "src/**/*.d.ts",
  "src/**/*/tsx",
  "src/**/*/vue",
  "electron/**/*.ts"
]

修改vite.config.js

通过上面的操作,我们已经安装和配置好了electron环境和vue环境,但此时的electron和vue是相互独立的,尚无法运行一个命令直接打开窗口并运行vue项目,需要修改一下vite.config.js,使它们之间有所关联。使用我们的vs code或其他IDE,打开vite.config.js,在defineCofig的插件(plugins)添加electron等选项。

import electron from 'vite-plugin-electron'
export default defineConfig({
  plugins: [
    vue(),
    electron({
      main: {
        // electron程序入口  
        entry: 'electron/main.js'
      },
      preload: {
        input: '/electron/preload.js'
      },
    }),

  ],
  build: {
    emptyOutDir: false  // 默认情况下,若 outDir 在 root 目录下,则 Vite 会在构建时清空该目录
  }
})

注意:这里除了安装vite-plugin-electron,还需要安装vite-plugin-electron-renderer插件

修改package.json

package.json中需要配置一下项目的打包,运行等信息,需要注意的点有:

  1. 一定要删除type: module选项,否则会报错,无法以module的形式加载electron
  2. 添加或修改入口文件为electron的main文件
  3. 重新配置打包命令和打包信息配置
    下面就是package.json的配置修改的内容,只显示修改或添加的,至于没有修改或需要删除的部分不作展示了
{
  "main": "electron/main.js",
  "scripts": {
    "build": "rimraf dist && rimraf release && vite build && electron-builder"
  }
}

生产环境配置

因为我们使用的打包工具是electron-builder。所以在要目录下,创建electron-builder.json文件,并添加下面的内容

{
  "build": {
    "appId": "com.xxx.xxx",  // 包名
    "productName": "name",   // 项目名称(软件的名称)
    "asar": true,           //  是否以asar的形式打包资源,设置为true后,dist包内将
    "copyright": "Copyright © 2023 xxx",
    "directories": {
      "output": "release/${version}"    // 打包后的输出路径
    },
    "file": "dist",    // 打包的资源目录(vue打包后的项目目录)
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "版本更新的具体内容"
    }
  }
}

至此,我们的electron-vue的项目搭建完成了,最后运行下面的命令,可以打包或运行项目

# 本地运行
npm run dev

# 打包
npm run build
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值