查看“Electron+Vue3配置-打包”的源代码


<span id="安装-electron-builder"></span>
== 安装 electron-builder ==

打开终端，执行命令安装：

<pre>npm install electron-builder --save-dev</pre>
<br>

== 打包配置 ==

=== 修改公共基础路径 ===

修改 vite.config.js 中的 base 选项为 “./”，如下所示：

<pre>export default defineConfig({
base: &quot;./&quot;
// ...
});</pre>
<br>

<span id="修改-electron-配置"></span>
=== 修改 Electron 配置 ===

修改 electron/main.js 文件中 mainWindow.loadURL 的参数为 vue 打包后的文件路径

<pre>// electron/main.js
const path = require(&quot;path&quot;);
const createWindow = () =&gt; {
//...
mainWindow.loadURL(`file://${path.join(__dirname, &quot;../dist/index.html&quot;)}`);
};</pre>
<br>

<span id="打包配置-1"></span>
=== 打包配置 ===

在 package.json 中添加如下配置，可根据需求调整：

<pre>{
    &quot;name&quot;: &quot;electron_vue3_test&quot;,
    &quot;description&quot;: &quot;Electron + Vue3 开发桌面应用&quot;,
    &quot;author&quot;: &quot;author&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;scripts&quot;: {
        // ...
        &quot;electron:build&quot;: &quot;npm run build &amp;&amp; electron-builder&quot;,
        &quot;postinstall&quot;: &quot;electron-builder install-app-deps&quot;
    },
    // ...
    &quot;build&quot;:{
        &quot;appId&quot;: &quot;your.id&quot;,
        &quot;productName&quot;: &quot;Electron + Vue3 开发桌面应用&quot;,
        &quot;copyright&quot;: &quot;Copyright © year ${author}&quot;,
        &quot;directories&quot;: {
            &quot;output&quot;: &quot;app_client&quot;
        },
        &quot;mac&quot;: {
            &quot;category&quot;: &quot;public.app-category.music&quot;,
            &quot;icon&quot;: &quot;build/icon.icns&quot;,
            &quot;target&quot;: [
                {
                    &quot;target&quot;: &quot;dmg&quot;,
                    &quot;arch&quot;: [
                        &quot;x64&quot;
                    ]
                },
                {
                    &quot;target&quot;: &quot;zip&quot;,
                    &quot;arch&quot;: [
                        &quot;x64&quot;
                    ]
                }
            ]
        },
        &quot;win&quot;: {
        &quot;icon&quot;: &quot;build/icon.ico&quot;,
        &quot;target&quot;: [
            {
                &quot;target&quot;: &quot;nsis&quot;,
                &quot;arch&quot;: [
                    &quot;x64&quot;,
                    &quot;ia32&quot;
                ]
            }
        ]
        },
        &quot;nsis&quot;: {
            &quot;oneClick&quot;: false,
            &quot;allowToChangeInstallationDirectory&quot;: true,
            &quot;installerIcon&quot;: &quot;build/icon.ico&quot;,
            &quot;uninstallerIcon&quot;: &quot;build/icon.ico&quot;
        }
    }
}</pre>
<br>

=== 打包 ===

打开终端，执行 <code>npm run electron:build</code> 打包，打包后的应用程序在 app_client 目录下。

<br>

=== 离线打包报错 ===

访问报错中提供的下载地址，将tar包下载到本地。

<br>

如果是windows系统就把tar包放置<code>C:\Users\super123\AppData\Local\electron\Cache</code>

<br>