Vue项目打包成exe可执行文件的实现过程(无瑕疵,完美版)

3天前 • Vue

这是一个相对复杂的问题，需要较详细的解释。以下是详细的攻略：

1. 准备工作

1.1 安装依赖

将Vue项目打包成exe可执行文件的过程中需要使用nodejs的Electron打包工具，需要安装nodejs。
Electron打包工具依赖于Electron Builder，因此需要安装Electron Builder。
安装完成以上两个依赖后，需要安装cross-env插件，用于在Windows、MacOS、Linux等不同操作系统中设置环境变量。

以上依赖的安装命令如下：

npm install -g electron-builder cross-env

1.2 配置package.json

需要在package.json中添加以下配置：

在“scripts”属性中添加以下内容：

"pack": "npm run build && electron-builder --config electron-builder.json && rm -rf dist_electron",
"dist": "npm run pack && electron-builder --config electron-builder.json --publish always",

这里的“electron-builder.json”是打包的配置文件，稍后会讲到。

在“dependencies”属性中添加以下内容：

"electron": "^10.1.5",
"electron-builder": "^22.9.1"

在“build”属性中添加以下内容：

"build": {
  "appId": "com.example.myapp",
  "productName": "My App",
  "directories": {
    "output": "dist_electron"
  },
  "files": [
    "dist/**/*",
    "main.js",
    "package.json",
    "node_modules/**/*"
  ],
  "mac": {
    "category": "public.app-category.business",
    "artifactName": "myapp-${version}.${ext}"
  },
  "win": {
    "icon": "build/icon.ico",
    "artifactName": "myapp-${version}.${ext}"
  },
  "linux": {
    "category": "Office",
    "icon": "build/icon.png",
    "artifactName": "myapp-${version}.${ext}"
  }
}

这里的“main.js”是Electron的主进程文件，稍后会讲到。其中“mac”、“win”和“linux”是对应平台上打包的配置，可以针对不同平台配置不同的信息。

2. 打包流程

2.1 执行打包命令

可以在Vue项目的根目录下执行以下命令，进行打包：

npm run dist

打包完毕后，会在“dist_electron”文件夹中生成可执行文件。

2.2 完善Electron主进程代码

需要在Vue项目的根目录下新建一个文件夹，并在其中创建一个“main.js”文件，用来编写Electron的主进程代码。

以下是一个最简单的“main.js”文件示例，在Electron的主进程中打开Vue项目的首页：

const { app, BrowserWindow } = require('electron')
const path = require('path')

let mainWindow

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })
  mainWindow.loadFile(path.join(__dirname, 'dist', 'index.html'))
})

在以上代码中，通过“require”引入了Electron的两个核心模块“app”和“BrowserWindow”，用来控制应用程序的生命周期和创建浏览器窗口。

在“ready”事件处理函数中创建了一个浏览器窗口，并通过“loadFile”方法加载了Vue项目的首页文件。

2.3 配置Electron打包选项

Electron打包工具可以通过“electron-builder.json”文件配置打包选项，以下是一个最简单的示例：

{
  "appId": "com.example.myapp",
  "productName": "My App",
  "directories": {
    "output": "dist_electron"
  },
  "files": [
    "dist/**/*",
    "main.js",
    "package.json",
    "node_modules/**/*"
  ],
  "mac": {
    "category": "public.app-category.business",
    "artifactName": "myapp-${version}.${ext}"
  },
  "win": {
    "icon": "build/icon.ico",
    "artifactName": "myapp-${version}.${ext}"
  },
  "linux": {
    "category": "Office",
    "icon": "build/icon.png",
    "artifactName": "myapp-${version}.${ext}"
  }
}

其中的“appId”和“productName”是应用程序的信息，“directories.output”是打包输出的文件夹名，“files”是打包包含的文件和文件夹，“mac”、“win”和“linux”是针对不同平台的打包选项。

3. 示例说明

3.1 打包一个简单的Vue项目

以下是一个简单的Vue项目，在页面上展示一个“Hello, World!”的文本：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello, World!'
        }
      })
    </script>
  </body>
</html>

可以通过以下步骤将该Vue项目打包成exe可执行文件：

在Vue项目的根目录下执行以下命令，生成“dist”文件夹：

npm run build

在Vue项目的根目录下创建一个文件夹“electron”，并在其中创建一个空文件“main.js”：

mkdir electron && touch electron/main.js

在electron/main.js中添加以下代码：

const { app, BrowserWindow } = require('electron')
const path = require('path')

let mainWindow

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })
  mainWindow.loadFile(path.join(__dirname, '..', 'dist', 'index.html'))
})

在package.json中添加以下配置：

"scripts": {
  "dist": "cross-env NODE_ENV=production electron-builder --config electron-builder.json --publish never"
},
"dependencies": {
  "electron": "^10.1.5"
},
"build": {
  "appId": "com.example.myapp",
  "productName": "My App",
  "directories": {
    "output": "dist_electron"
  },
  "files": [
    "dist/**/*",
    "electron/**/*",
    "package.json"
  ]
}

在项目根目录下创建一个“electron-builder.json”文件，并添加以下配置：

{
  "extends": null,
  "appId": "com.example.myapp",
  "productName": "My App",
  "directories": {
    "output": "dist_electron"
  }
}

在命令行中执行以下命令，进行打包：

npm run dist

打包完毕后，在“dist_electron”文件夹下会生成可执行文件“My App.exe”。

3.2 打包一个带有Electron扩展的Vue项目

以下是一个带有Electron扩展的Vue项目，在页面上展示一个计数器，点击按钮可计数：

<!DOCTYPE html>
<html>
  <head>
    <title>Electron + Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const electron = require('electron')
      const ipcRenderer = electron.ipcRenderer

      window.addEventListener('DOMContentLoaded', () => {
        document.querySelector('#count-button').addEventListener('click', () => {
          ipcRenderer.send('count')
        })
      })
    </script>
  </head>
  <body>
    <div id="app">
      <p>Count: {{ count }}</p>
      <button id="count-button">Count up</button>
    </div>

    <script>
      var app = new Vue({
        el: '#app',
        data: {
          count: 0
        }
      })

      const { ipcRenderer } = require('electron')
      ipcRenderer.on('count-updated', (event, count) => {
        app.count = count
      })
    </script>
  </body>
</html>

在以上代码中，通过“require”引入了Electron的“ipcRenderer”模块，用来在Electron的主进程与渲染进程之间通信。

并在页面上添加了一个计数器和一个点击按钮，点击按钮可发送一个计数请求，并将结果更新到计数器上。

可以通过以下步骤将该Vue项目打包成exe可执行文件（假设该Vue项目根目录下有一个名为“extensions”的文件夹，那么放置Electron扩展的脚本文件就存在“extensions”文件夹中）：

在Vue项目的根目录下执行以下命令，生成“dist”文件夹：

npm run build

在Vue项目的根目录下创建一个文件夹“electron”，并在其中创建一个“main.js”文件和一个“count.js”文件（作为Electron扩展的脚本）：

mkdir electron
touch electron/main.js && touch electron/extensions/count.js

在“electron/main.js”中添加以下代码：

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')

let mainWindow

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })

  // 通过webContents拦截请求
  mainWindow.webContents.session.webRequest.onBeforeRequest({ urls: ['http://*/count'] }, (details, callback) => {
    // 使用count.js文件作为Electron的扩展
    callback({ cancel: false, redirectURL: `file://${path.join(__dirname, '..', 'extensions', 'count.js')}` })
  })

  mainWindow.loadFile(path.join(__dirname, '..', 'dist', 'index.html'))
})

// 监听渲染进程发送的请求，返回计数结果
ipcMain.on('count', (event, arg) => {
  event.sender.send('count-updated', arg + 1)
})

这里使用了Electron的“webContents”模块，拦截了渲染进程发送的请求，使用“count.js”文件作为Electron的扩展，并在Electron主进程中返回结果。

在“electron/extensions/count.js”中添加以下代码：

const { electron } = require('electron')

electron.ipcRenderer.on('count', (event, arg) => {
  electron.ipcRenderer.send('count', arg)
})

这里的“electron”对象是Electron的全局对象，可以通过该对象的“ipcRenderer”发送和接收消息。

在package.json中添加以下配置：

"dependencies": {
  "electron": "^10.1.5"
},
"scripts": {
  "dist": "cross-env NODE_ENV=production electron-builder --config electron-builder.json --publish never"
},
"build": {
  "appId": "com.example.myapp",
  "productName": "My App",
  "directories": {
    "output": "dist_electron"
  },
  "files": [
    "dist/**/*",
    "electron/**/*",
    "package.json"
  ]
}

这里只是添加了Electron的依赖，其他配置和步骤与示例一相同。

在项目根目录下创建一个“electron-builder.json”文件，并添加以下配置：

{
  "extends": null,
  "appId": "com.example.myapp",
  "productName": "My App",
  "directories": {
    "output": "dist_electron"
  }
}

在命令行中执行以下命令，进行打包：

npm run dist

打包完毕后，在“dist_electron”文件夹下会生成可执行文件“My App.exe”。

以上就是Vue项目打包成exe可执行文件的完整攻略，包括基本的打包流程、Electron主进程代码的编写和打包选项的配置，同时附上了两个示例的具体过程，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue项目打包成exe可执行文件的实现过程(无瑕疵,完美版) - Python技术站

Vue

0 0 打赏

微信扫一扫

支付宝扫一扫

Vue渲染器设计实现流程详细讲解

上一篇 3天前

Vue3中vuex的基本使用方法实例

下一篇 3天前

vue内点击url下载文件的最佳解决方案分享

下面我将为大家详细讲解“Vue内点击URL下载文件的最佳解决方案分享”。一、问题背景在Vue项目中，如果需要下载文件，一般的做法是通过后端API来实现文件下载。但是有些特殊情况下，我们需要在前端页面中通过点击链接或按钮来实现文件下载的功能，例如导出Excel表格。那么在Vue项目中，如何实现这个功能呢？二、解决方案我们可以通过在前端传递一个文件下载的…

Vue 1天前
000
SpringBoot结合Vue实现投票系统过程详解

标题：SpringBoot结合Vue实现投票系统过程详解简介在这个教程中，我们将介绍如何使用Spring Boot和Vue来构建一个简单的投票系统。我们将使用Spring Boot构建后端API，使用Vue创建UI并前后端相结合。投票系统架构我们将采用前后端分离的架构来构建这个投票系统。常见的做法是将前端和后端分别放置在不同的服务器上。在我们的示例中…

Vue 1天前
000
vue中集成省市区街四级地址组件的实现过程

下面就为你详细讲解vue中集成省市区街四级地址组件的实现过程的完整攻略。一、什么是省市区街四级地址组件省市区街四级地址组件是一种常见的地址选择器，用户可以通过该组件非常方便的选择自己所在的省份、城市、区县和街道信息。二、如何集成省市区街四级地址组件 1. 使用第三方库可以直接使用第三方的地址组件库来快速实现，在vue中，常见的第三方库有vue-qui…

Vue 2天前
000
解析vue data不可以使用箭头函数问题

解析vue中的data不可以使用箭头函数问题，主要是因为箭头函数没有自己的上下文，而且 Vue 中传递给 data 的对象必须是可扩展的，以便在数据更新时进行响应。下面是该问题的解决攻略：方法1：使用传统的函数在Vue组件中，如果要解析data对象，应该在声明周期的created或mounted函数中使用传统的函数来定义data。如下所示： <te…

Vue 1天前
000
Vue-cli3执行serve和build命令时nodejs内存溢出问题及解决

当使用Vue-cli3执行serve和build命令时，可能会遇到nodejs内存溢出问题，此时需要进行相应的解决。问题原因分析执行serve和build命令时，vue-cli会在内存中对项目进行打包和编译，当项目较大时，内存使用过于频繁，会导致nodejs内存溢出。这时候我们需要修改nodejs默认的最大内存限制，以解决此问题。解决方案修改pack…

Vue 1天前
000
Vue.js常用指令汇总（v-if、v-for等）

当今的前端开发中，Vue.js框架已经变得越来越流行。在Vue.js中，指令是用于添加动态行为的一种特殊属性，包括了v-if、v-for等。在本文中，我们将会详细的介绍一下Vue.js常用指令汇总。 v-if指令 v-if指令用于条件渲染一个元素，当条件为true时元素才会被渲染。 <template> <div v-if="is…

Vue 1天前
000
Vue2.0生命周期的理解

关于Vue2.0生命周期的理解，我们可以说是一个Vue开发中的关键知识点之一。下面我会给出完整的攻略，涉及Vue实例的整个生命周期过程，包括各个周期阶段的触发时机、各个周期函数的执行顺序、常见实用场景等等，帮助你更好地理解Vue2.0的生命周期。何为Vue2.0生命周期 Vue实例参照了生命周期的概念，每个组件（包括根组件）在被创建、更新、销毁时都有自己的…

Vue 1天前
000
基于vite2+vue3制作个招财猫游戏

下面是基于vite2+vue3制作招财猫游戏的攻略，包括如何搭建开发环境、创建基本项目结构、编写代码、调试和打包等步骤： 1. 搭建开发环境首先需要安装Node.js，然后通过npm全局安装vite和vue： npm install -g vite vue 2. 创建项目在终端中进入想要创建项目的目录下执行以下命令： mkdir zhao-cai-mao…

Vue 2天前
000
vue实现集成腾讯TIM即时通讯

vue实现集成腾讯TIM即时通讯 1. 安装TIM SDK 首先，我们需要在项目中安装TIM SDK，在项目根目录下执行以下命令： npm install tim-js-sdk –save 2. 创建TIM实例安装完成TIM SDK后，我们需要在项目中创建TIM实例，代码示例如下： import TIM from ‘tim-js-sdk’; const …

Vue 2天前
000
vue+elementui(对话框中form表单的reset问题)

当使用Vue框架结合ElementUI组件库开发对话框（Dialog）时，遇到的一个常见问题是如何对对话框中的表单进行重置（Reset）。本文详细讲解了这个问题的解决方法。问题描述在Vue和ElementUI中，需要经常使用对话框来收集用户输入的信息。在这个场景中，通常是将表单放在对话框中，以便用户输入信息。当用户提交表单或者关闭对话框时，开发者需要将表…

Vue 1天前
000