vue项目做成exe

将 Vue 项目打包成可执行的 .exe 文件,可以利用 Electron 框架将其转换为一个跨平台的桌面应用程序。Electron 结合了 Node.js 和 Chromium 的能力,使得你可以在桌面上轻松部署你的 Vue 项目。本教程将引导初学者如何将 Vue 项目打包为 .exe 文件。

1. 前提条件

确保在计算机上安装了 Node.js 和 npm。然后使用 npm 或 yarn 安装 Vue CLI:

```bash

npm install -g @vue/cli

# 或者

yarn global add @vue/cli

```

2. 创建一个新的 Vue 项目

通过运行以下命令创建一个新的 Vue 项目:

```bash

vue create my-vue-app

cd my-vue-app

```

3. 将 Electron 添加到 Vue 项目中

为 Vue 项目安装 Vue CLI 插件 Electron Builder:

```bash

vue add electron-builder

```

在安装过程中,系统会询问你需要使用的 Electron 版本。请按照提示进行选择。

4. 修改配置文件

在 Vue 项目的 `package.json` 文件中,你会发现添加了 Electron Builder 相关的脚本。你可以修改这些脚本,也可以添加自己的脚本。

例如,你可能希望跳过打包的 .asar 文件,为 `electronBuilder` 属性添加 `asar: false`:

```json

"electronBuilder": {

"builderOptions": {

"asar": false

}

}

```

5. 在开发模式下运行项目和打包 .exe 文件

在项目文件夹中执行以下命令,以开发者模式启动 Vue 和 Electron:

```bash

npm run electron:serve

```

发布并编译 .exe 文件,请运行以下命令:

```bash

npm run electron:build

```

发布完成后,生成的 .exe 文件将出现在项目中的 `/dist_electron` 文件夹内。

6. 自定义项目配置

要自定义应用程序,可以编辑项目根目录下的 `/public/background.js` 文件。这个文件包含启动、关闭和其他功能的实现。你还可以编辑这个文件,以实现常见的 Electron 选项,如菜单栏设置等。

通过遵循上述过程,你可以将 Vue 应用程序转换为桌面可执行的 .exe 文件。这使得你的项目更容易在用户电脑上安装和使用。