vue打包成exe（详细）

最新推荐文章于 2025-10-13 09:06:50 发布

原创

最新推荐文章于 2025-10-13 09:06:50 发布 · 1.8k 阅读

7 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用Electron将Vue项目打包成桌面应用，包括修改Vue项目的公共路径、打包Vue项目、整合Electron的main.js、设置Electron打包配置以及使用electron-packager进行打包。过程中涉及Vue-cli的配置、依赖安装、打包预览和最终的exe文件生成。

利用：Electron 进行开发。链接》

第一：把electron的官方例子扒下来，下面简称A，留着待用：

git clone https://github.com/electron/electron-quick-start

第二：进入我们自己的项目（下面简称B），修改公共路径为相对路径（很多同学都是这步出了问题，导致 npm run build 后出现白屏情况）：

如果你是 vue-cli3 构建的项目：

执行下列指令，打开vue-cli图形配置界面，选择配置，修改公共路径为 ./ , 保存即可：

vue ui

或者你可以点击上图中右上角的打开 vue 配置，或者在项目的根目录中创建 vue.config.js，设置以下内容：

module.exports = {   
lintOnSave: undefined,   
publicPath: './',   
outputDir: undefined,   
assetsDir: undefined,   
runtimeCompiler: undefined,   
productionSourceMap: undefined,   
parallel: un