1. Python技术站首页
  2. 其他
  3. Vue

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

• 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可执行文件：

  1. 在Vue项目的根目录下执行以下命令，生成“dist”文件夹：
npm run build
  1. 在Vue项目的根目录下创建一个文件夹“electron”，并在其中创建一个空文件“main.js”：
mkdir electron && touch electron/main.js
  1. 在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'))
})
  1. 在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"
  ]
}
  1. 在项目根目录下创建一个“electron-builder.json”文件，并添加以下配置：
{
  "extends": null,
  "appId": "com.example.myapp",
  "productName": "My App",
  "directories": {
    "output": "dist_electron"
  }
}
  1. 在命令行中执行以下命令，进行打包：
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”文件夹中）：

  1. 在Vue项目的根目录下执行以下命令，生成“dist”文件夹：
npm run build
  1. 在Vue项目的根目录下创建一个文件夹“electron”，并在其中创建一个“main.js”文件和一个“count.js”文件（作为Electron扩展的脚本）：
mkdir electron
touch electron/main.js && touch electron/extensions/count.js
  1. 在“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”发送和接收消息。

  1. 在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的依赖，其他配置和步骤与示例一相同。

  1. 在项目根目录下创建一个“electron-builder.json”文件，并添加以下配置：
{
  "extends": null,
  "appId": "com.example.myapp",
  "productName": "My App",
  "directories": {
    "output": "dist_electron"
  }
}
  1. 在命令行中执行以下命令，进行打包：
npm run dist

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

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

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

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • Vue3中watch监听使用详解

    下面详细讲解Vue3中watch监听的使用方法。 什么是Vue3中的watch监听 watch监听是Vue3的一个新特性，它可以用于观察 Vue 实例数据的变化，执行一些副作用操作。Vue3中watch监听的基本语法如下： <template> <div> {{ message }} </div> </templat…

    Vue 2023年5月29日
    00

  • Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解

    来讲解一下Vue中判断语句和循环语句的基础用法及其注意事项。 基础用法 Vue中的判断语句 Vue中的判断语句有两种：v-if和v-show。它们的作用都是根据某个条件来控制html元素的显示与隐藏，不同的是v-if是真正的条件渲染，如果条件为false，那么这个元素就不会被渲染在DOM中，而v-show则是简单地控制元素的display属性。 使用v-if…

    Vue 2023年5月27日
    00

  • Vue.js添加组件操作示例

    当您需要在Vue.js网页应用程序中添加组件时，您可以按照以下攻略进行操作： 1. 创建一个新的Vue组件 要在Vue.js应用程序中添加组件，首先需要使用Vue.js创建一个新的组件。可以按照以下步骤操作： Vue.component(‘my-component’, { template: ‘<div>This is my first Vue.…

    Vue 2023年5月27日
    00

  • Springboot+ElementUi实现评论、回复、点赞功能

    下面是“Springboot+ElementUi实现评论、回复、点赞功能”的完整攻略： 简介 本文将介绍如何使用Spring Boot和ElementUi实现评论、回复、点赞功能。在本文中，我们将使用Spring Boot作为后端框架，使用ElementUi作为前端框架。 技术栈 前端技术：Vue.js、ElementUi、Axios 后端技术：Spring…

    Vue 2023年5月28日
    00

  • 关于Vue不能监听(watch)数组变化的解决方法

    讲解“关于Vue不能监听(watch)数组变化的解决方法”的完整攻略分为以下几个部分： 问题背景 解决方法一：使用Vue提供的$set方法 解决方法二：使用深度监听watch 示例说明1：使用$set方法动态添加数组元素 示例说明2：使用深度监听watch监听数组变化 1. 问题背景 在Vue中，数组是一种重要的数据类型，但其本身是无法触发响应，也就无法直接…

    Vue 2023年5月29日
    00

  • Vue 进阶之路（三）

    下面我来为您详细讲解一下“Vue 进阶之路（三）”的完整攻略。 标题 “Vue 进阶之路（三）”的完整攻略主要包含以下内容： 1. Vue的混入 混入是Vue中的一个非常有用的特性，它可以让我们把一个对象的属性、方法等合并到一个Vue组件中。这样做的好处是可以有效地避免多个组件之间的代码冗余。 下面代码展示了如何在Vue中使用混入： const myMixi…

    Vue 2023年5月27日
    00

  • vue如何使用moment处理时间戳转换成日期或时间格式

    下面是关于使用moment处理时间戳转换成日期或时间格式的完整攻略。 什么是moment.js？ moment.js 是一个javascript 日期库，可用于解析、验证、操作和格式化日期。它支持日期和时间的计算、时间戳、日期字符串解析和格式化，以及各种本地化和时区设置等功能。 在Vue中使用moment.js 使用moment.js需要先将其引入到Vue项…

    Vue 2023年5月29日
    00

  • vue3项目中引入ts的详细图文教程

    请允许我为您详细讲解“vue3项目中引入ts的详细图文教程”的完整攻略。 1. 创建Vue3项目 首先，我们需要使用Vue CLI创建一个Vue3项目。在终端输入以下命令： vue create vue3-ts-demo 在创建项目时，我们需要选择手动模式，以便为项目启用TypeScript选项。选择手动模式后，我们需要勾选typescript选项，请确保选…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部