用vue打包的app电脑可执行

标题：使用 Vue.js 构建并打包桌面应用的详细教程

摘要：本教程主要介绍了使用 Vue.js 框架来构建桌面应用的技巧，并详述如何对其进行编译和打包，以便在各种操作系统平台上执行。

一、背景介绍

Vue.js 是一个用于构建用户界面的渐进式框架。Vue.js 的核心库只关注视图层，易于与其他库或已有项目整合。但是在某些场景下，我们希望将 Vue.js 构建的页面作为桌面应用来运行，那么我们该怎么做呢？答案是：结合 Electron。

Electron 是一个能将 JavaScript, HTML, CSS 等 Web 技术打包成可执行文件的跨平台桌面应用开发框架。因此，结合 Vue.js 和 Electron 可以实现所需目标。

本教程将会指导你完成以下步骤：使用 Vue.js 编写一个简易应用，之后通过集成 Electron 打包成桌面应用。

二、构建 Vue.js 应用

1. 安装 Node.js 和 npm：首先需要确保你的计算机上已经安装了 Node.js 和 npm。可以在 Node.js 官网下载并安装。

2. 安装 Vue CLI：Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。我们可以使用 npm 安装 Vue CLI：

```

npm install -g @vue/cli

```

3. 创建 Vue 项目：使用以下命令创建一个新的 Vue 项目：

```

vue create my-project

```

4. 运行 Vue 项目：进入项目目录并运行项目：

```

cd my-project

npm run serve

```

现在你的 Vue 项目已经创建并运行，接下来我们将为其集成 Electron。

三、集成 Electron

1. 安装 Vue CLI 插件 Electron Builder：在项目根目录下运行以下命令来安装 Vue CLI 插件 Electron Builder：

```

vue add electron-builder

```

2. 项目结构调整：在 src 文件夹中创建一个名为 “background.js”的文件，这个文件将作为 Electron 应用的主进程。然后，将 package.json 中的 "main" 和 "electron" 字段分别修改为 "src/background.js" 和 "electron"。这样 Electron 就知道从 "src/background.js" 文件开始运行。

3. 运行 Electron 应用：运行以下命令，通过 Electron 启动 Vue 应用：

```

npm run electron:serve

```

现在你已经成功集成 Electron 并运行起来了，接下来将说明如何打包该应用为可执行文件。

四、打包应用

1. 设置建议：在"package.json"文件中添加 "build" 对象，以方便对打包做出一些自定义设置，例如应用名称、图标等。

2. 打包命令：在项目根目录下运行以下命令：

```

npm run electron:build

```

3. 输出文件：经过一系列构建和打包过程后，输出文件会被保存在 "dist_electron" 文件夹中。你可以在此找到针对不同平台（如 Windows、macOS 等）的可执行文件。

至此，一个使用 Vue.js 搭建并通过 Electron 打包的桌面应用就诞生了！你可以学习更多关于 Vue.js 和 Electron 的相关知识，编写更为复杂的桌面应用来满足实际需求。