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日

相关文章

  • vue中axios实现数据交互与跨域问题

    准备工作 首先，需要确保你已经安装好了Vue.js和axios。如果没有安装，需要通过以下指令进行安装： npm install vue axios –save 安装成功后，打开main.js文件，添加以下代码： import Vue from ‘vue’ import axios from ‘axios’ Vue.prototype.$http = ax…

    Vue 2023年5月27日
    00

  • Vue编译器实现代码生成方法介绍

    Vue编译器实现代码生成方法介绍 概述 Vue编译器将Vue模板编译成渲染函数，从而在浏览器上渲染出真正的页面。代码生成是Vue编译器实现的关键部分之一。它将预处理过的模板转化为可以直接执行的渲染函数。 在进行代码生成时，Vue编译器会通过模板语法分析器将模板转化为抽象语法树(AST)，接着对AST进行优化处理，最后再将AST转换为渲染函数的JavaScri…

    Vue 2023年5月27日
    00

  • vue-loader教程介绍

    Vue-loader教程介绍 Vue-loader是Vue.js的官方loader，通过webpack将.vue文件转换成Javascript模块的形式。Vue-loader使你可以用单文件组件的方式书写Vue组件，这大大简化了组件的开发和维护。 安装 可以使用npm来安装vue-loader： npm install -D vue-loader vue-t…

    Vue 2023年5月28日
    00

  • Vue3将虚拟节点渲染到网页初次渲染详解

    Vue3将虚拟节点渲染到网页初次渲染详解 在Vue3中，将虚拟节点渲染到网页上，是在createApp的过程中完成的。具体的过程如下： 创建Vue实例 我们可以使用createApp方法创建Vue实例，如下： const app = Vue.createApp({ // Options }) createApp方法中的参数可以传入一个普通的JavaScrip…

    Vue 2023年5月28日
    00

  • Vue Object.defineProperty及ProxyVue实现双向数据绑定

    Vue是一款流行的JavaScript框架，它拥有与DOM相关的数据绑定能力。其中，双向数据绑定是Vue框架中最为重要的概念之一。 在Vue中，我们可以通过使用Object.defineProperty()或Proxy方法实现双向数据绑定。这两种方法的实现方式其实很类似，它们都可以通过监听数据变化来实现数据的双向绑定。 Object.defineProper…

    Vue 2023年5月28日
    00

  • Vue组件中的自定义事件你了解多少

    当我们在vue组件中进行数据交互时，父组件向子组件传递了数据，在子组件中操作了这些数据，并根据需求将结果返回给父组件时，我们就需要用到自定义事件。自定义事件可以让我们在父组件中监听到子组件事件的触发并获取子组件中需要返回的数据，从而完成父子组件间的数据交互。 以下是自定义事件的步骤和示例： 步骤一：在子组件中定义自定义事件并触发 在子组件中通过 this.$…

    Vue 2023年5月28日
    00

  • Vue实现美团app的影院推荐选座功能【推荐】

    首先我们需要了解一下美团app中影院推荐选座功能的实现原理，最主要的是通过Vue框架、Vue-router和Vuex三个组件来实现该功能。 第一步：创建Vue项目，安装相关依赖 在终端中运行以下命令： npm install -g vue-cli //全局安装vue-cli vue init webpack cinema //创建一个新项目并命名为“cine…

    Vue 2023年5月27日
    00

  • vue中如何将日期转换为指定的格式

    当我们在使用 Vue 开发应用时，有时需要将日期格式化成特定的格式，例如“YYYY-MM-DD hh:mm:ss”等等。Vue 在这方面提供了非常方便的功能，并且在格式化日期时使用的是第三方库 moment.js。下面是具体操作： 步骤一：安装 moment.js 库 要使用 moment.js 库，需要将其安装到项目中，可以使用 npm 或 yarn: n…

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