vuecli+electron 打包配置

最新推荐文章于 2025-06-05 08:55:18 发布

freewlt

最新推荐文章于 2025-06-05 08:55:18 发布

阅读量725

点赞数 1

CC 4.0 BY-SA版权

分类专栏： electron 文章标签： vue.js javascript 前端 electron

本文链接：https://blog.csdn.net/qq_16672095/article/details/122472281

electron 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vue项目中配置electron-builder进行应用打包。详细展示了vue.config.js文件的设置，包括公共路径、项目名、版权信息等，并针对Windows平台提供了额外的定制选项，如图标、权限、安装程序类型及桌面快捷方式创建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目根目录下，新建 vue.config.js 文件，文件内容如下，可据自己的具体情况做相应更改；

vue.config.js文件：

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                'appId': 'wltDemo.com',
                'productName': 'wltDemo', // 项目名，也是生成的安装文件名，即wyDemo.exe
                'copyright': 'wlt Copyright © 2022', // 版权信息
                'files': [
                    './**/*'
                ],
                'extraFiles': [ // 把指定的资源复制到程序根目录，即把server文件夹的内容复制到程序根目录，这里server文件夹下的内容相当于我的后台，我在background.js中有相应的处理。
                    './server'
                ],
                'directories': {
                    'output': './dists' // 输出文件路径
                },
                'win': { // win相关配置
                    'icon': './favicon.ico', // 图标，当前图标在根目录下，注意这里有两个坑
                    "requestedExecutionLevel": "requireAdministrator", //获取管理员权限
                    'target': [{
                        'target': 'nsis', // 利用nsis制作安装程序
                        'arch': [
                            'x64', // 64位
                            'ia32'
                        ]
                    }]
                },
                'nsis': {
                    'oneClick': false, // 是否一键安装
                    'allowElevation': true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
                    'allowToChangeInstallationDirectory': true, // 允许修改安装目录
                    'installerIcon': './favicon.ico', // 安装图标
                    'uninstallerIcon': './favicon.ico', // 卸载图标
                    'installerHeaderIcon': './favicon.ico', // 安装时头部图标
                    'createDesktopShortcut': true, // 创建桌面图标
                    'createStartMenuShortcut': true, // 创建开始菜单图标
                    'shortcutName': 'wltDemo' // 图标名称(项目名称)
                }
            }
        }
    }
}