首页 > 脚本专栏 > python > Python和Vue代码打包成.exe

Python和Vue代码打包成.exe文件的保姆级教程

2026-03-17 08:44:09 作者：Java后端的Ai之路

这篇文章主要介绍了如何将Python和Vue项目打包成.exe文件的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

你是不是也曾想过：把自己写的 Python 脚本发给朋友，结果对方说“打不开，没有 Python 环境”？或者精心制作的 Vue 网页，想让用户像用软件一样双击就能用，而不是打开浏览器输入地址？别担心，把代码变成 .exe 文件就能解决这些问题！

本文将用 “是什么 → 为什么 → 如何用 → 如何用好” 的逻辑，分别讲解 Python 和 Vue 项目打包成 .exe 的全过程。既有专业术语，也有大白话和生活案例，保证你看完就能动手。

一、Python 代码打包成 .exe

1.1 是什么？（专业解释 + 大白话）

专业解释：将 Python 脚本（.py）及其依赖的库、Python 解释器打包成一个独立的可执行文件（Windows 下为 .exe）。这个文件可以在没有安装 Python 环境的 Windows 电脑上直接运行。

大白话：就像你做了一套乐高积木（代码），但对方家里没有乐高零件（Python 环境）。你干脆把积木拼好，连同一份说明书（解释器）一起放进一个盒子里（.exe），对方拿到盒子打开就能玩，不需要自己准备任何东西。

生活案例：你写了一款猜数字的小游戏，想发给不懂编程的女朋友玩。直接发 .py 文件她打不开。打包成 .exe 后，她双击就能玩，就像打开一个普通游戏一样。

1.2 为什么要用？（优势）

分发方便：用户无需安装 Python 和任何库。
保护源码：.exe 是二进制文件，比直接给源码更难被剽窃（但并非绝对安全）。
跨版本兼容：不用担心用户电脑上的 Python 版本与你的不兼容。
专业感：给客户或同事展示时，一个 .exe 比一堆脚本文件更显专业。

1.3 如何用？（手把手教程）

核心工具：PyInstaller

PyInstaller 是目前最主流的 Python 打包工具，支持 Windows、Linux、macOS。

步骤 1：安装 PyInstaller

打开命令提示符（cmd）或终端，输入：

pip install pyinstaller

步骤 2：准备你的 Python 脚本

假设你的脚本叫 my_game.py，放在某个文件夹（如 D:\my_project）。建议先在一个干净的虚拟环境中测试，避免打包进不必要的库。

步骤 3：执行打包命令

进入脚本所在目录，运行：

pyinstaller --onefile my_game.py

--onefile：将所有内容打包成单个 .exe 文件。
如果不加这个参数，会生成一个文件夹，里面包含多个依赖文件。

等待几分钟，打包完成后，在 dist 文件夹里就能找到 my_game.exe。

常用参数：

-w 或 --windowed：如果你的程序有图形界面（如 Tkinter、PyQt），加上此参数可避免运行时弹出命令行窗口。
--icon=my_icon.ico：给生成的 .exe 添加自定义图标（图标需为 .ico 格式）。
--name="My Game"：指定生成的文件名。

例如，带图标且无命令行窗口的打包命令：

pyinstaller --onefile -w --icon=game.ico my_game.py

1.4 如何用好？（进阶技巧）

1.减小文件体积

Python 打包后常常几十 MB，甚至上百 MB，因为包含了整个解释器和标准库。优化方法：

使用虚拟环境：新建一个虚拟环境，只安装脚本真正需要的库，然后在该环境中打包。
使用 UPX 压缩：下载 UPX 并放在 PATH 中，PyInstaller 会自动调用它压缩可执行文件，体积可缩小 30%-50%。
清理不必要的库：检查 import 是否引入了不必要的模块，可以用 pyinstaller --exclude-module 排除。

2.处理文件路径问题

打包后的 .exe 运行时的当前目录可能和开发时不同，导致找不到资源文件（如图片、配置文件）。解决方案：

在代码中动态获取运行时路径：

import sys
import os
def resource_path(relative_path):
"""获取资源的绝对路径，兼容开发和打包后"""
if hasattr(sys, '_MEIPASS'):
# PyInstaller 创建的临时文件夹
base_path = sys._MEIPASS
else:
base_path = os.path.abspath(".")
return os.path.join(base_path, relative_path)

然后在加载文件时使用 resource_path('images/logo.png')。

同时，打包时需要将资源文件一起打包，使用 --add-data 参数：

pyinstaller --onefile --add-data "images;images" my_game.py

（Windows 用分号分隔源和目标，Linux/macOS 用冒号）

3.调试技巧

如果打包后运行闪退，可以在命令行中运行 .exe，查看错误信息。或者打包时不要加 -w，让命令行窗口显示错误日志。

还可以使用 --debug 参数生成带调试信息的版本。

二、Vue 代码打包成 .exe

2.1 是什么？（专业解释 + 大白话）

专业解释：Vue 是 Web 前端框架，生成的是 HTML、CSS、JS 文件，需要浏览器才能运行。将 Vue 项目打包成 .exe，实际上是利用 Electron 这样的框架，把 Vue 的静态文件嵌入到一个内置的 Chromium 浏览器内核中，生成一个桌面应用。

大白话：你做了一个非常漂亮的网页（Vue 项目），但想让用户像使用 QQ 一样双击图标就能打开，而不是打开浏览器输入网址。于是你给这个网页穿上了一个“浏览器外套”（Electron），这个外套没有地址栏、工具栏，看起来就是一个真正的软件。

生活案例：你最喜欢的代码编辑器 VS Code，其实就是用 Electron 把网页技术包装成的桌面应用。你写代码时的界面，本质上是一个跑在精简版 Chrome 里的网页。

2.2 为什么要用？

跨平台桌面应用：一套代码同时生成 Windows、macOS、Linux 应用。
离线可用：打包后用户无需联网，也能使用你的应用。
访问系统资源：通过 Electron 的 Node.js 能力，可以读写文件、调用系统 API 等，比纯网页更强大。
分发简单：用户下载安装包即可使用，无需部署服务器。

2.3 如何用？（手把手教程）

核心工具：Electron + electron-builder

我们以创建一个简单的 Vue 3 + Electron 项目为例。

步骤 1：创建 Vue 项目

如果你还没有 Vue 项目，先用 Vue CLI 创建一个：

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app

步骤 2：安装 Electron 及相关依赖

npm install electron --save-dev
npm install electron-builder --save-dev # 用于打包

步骤 3：配置 Electron 主进程

在项目根目录创建 electron.js（或 main.js），内容如下：

const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false, // 出于安全考虑，通常禁用
contextIsolation: true,
}
})
// 加载 Vue 打包后的 index.html
// 开发环境可以加载 http://localhost:8080
// 生产环境加载文件
if (process.env.NODE_ENV === 'development') {
win.loadURL('http://localhost:8080')
win.webContents.openDevTools() // 打开开发者工具
} else {
win.loadFile('dist/index.html')
}
}
app.whenReady().then(createWindow)

步骤 4：修改 package.json

在 package.json 中添加以下字段：

{
"main": "electron.js",
"scripts": {
"electron:serve": "vue-cli-service serve & electron .",
"electron:build": "vue-cli-service build && electron-builder"
},
"build": {
"appId": "com.example.myapp",
"productName": "My Vue App",
"directories": {
"output": "dist_electron"
},
"files": [
"dist/**/*",
"electron.js"
],
"win": {
"target": "nsis",
"icon": "public/icon.ico"
}
}
}

步骤 5：测试开发模式

先运行 npm run electron:serve，它会启动 Vue 开发服务器并打开 Electron 窗口，实时看到修改效果。

步骤 6：打包成 .exe

运行命令：

npm run electron:build

等待打包完成，在 dist_electron 文件夹下会生成安装包（如 My Vue App Setup 1.0.0.exe）和便携版 .exe。

2.4 如何用好？（进阶技巧）

1.优化打包体积

Electron 应用默认包含整个 Chromium 和 Node.js，体积通常在 50MB 以上。优化方法：

按需加载：在 Vue 中使用路由懒加载、组件懒加载。
压缩资源：图片、字体等资源压缩。
移除不必要的依赖：检查 node_modules 中是否有开发依赖被打包进去（electron-builder 默认会过滤 devDependencies）。

2.处理跨域与安全

在 Electron 中，渲染进程（网页）默认无法直接访问 file:// 协议下的外部资源。如果需要请求网络 API，可以使用 webSecurity: false（不推荐）或通过主进程代理。

推荐做法：在渲染进程中使用 fetch 请求 API，前提是 API 支持 CORS。如果不行，可以在主进程中使用 net 模块发起请求，然后通过 ipcMain 和 ipcRenderer 通信。

3.自动更新

Electron 应用可以支持自动更新。配合 electron-updater 和 GitHub Releases 或自己的更新服务器，让用户每次打开都能获得最新版本。

4.常见坑点

路径问题：打包后，__dirname 指向的是 app.asar 内部路径，无法直接写入文件。需要读写用户数据时，应使用 app.getPath('userData') 获取可写目录。
开发与生产环境判断：通过 process.env.NODE_ENV 区分，或使用 electron-is-dev 库。
图标格式：Windows 需 .ico 格式，macOS 需 .icns。

三、总结

维度	Python 打包	Vue 打包（Electron）
本质	打包解释器+代码	打包浏览器内核+网页
适用场景	脚本、小工具、数据分析应用	复杂交互的桌面应用、现有 Web 项目
体积	一般 10~50 MB	一般 50~200 MB
学习曲线	平缓（PyInstaller 简单）	中等（需了解 Electron 架构）
跨平台	需分别打包	一套代码打包多平台

无论你是 Python 开发者还是 Vue 开发者，将代码打包成 .exe 都是让作品更易传播、更专业的重要技能。希望本教程能帮你迈出这一步！

以上就是Python和Vue代码打包成.exe文件的保姆级教程的详细内容，更多关于Python和Vue代码打包成.exe的资料请关注脚本之家其它相关文章！