Vue3 桌面应用打包指南：Vite + Electron 打造高效构建体验

2024-01-18 17:02:48

前言

上一篇博文《Vite + Electron 快速构建一个 Vue3 桌面应用（二）——动态模块热重载》中，我们完成了开发时的动态模块热重载功能。现在，是时候来看看怎么完成最后一步——打包了。

打包工具的选择

在 Vue3 桌面应用打包中，常用的工具包括：

Electron-Builder：这是最受欢迎的 Electron 打包工具，它提供了丰富的功能和选项，可以轻松地将您的应用程序打包成多种格式，包括 Windows、macOS 和 Linux。
Webpack：Webpack 是一个模块化打包工具，它可以将您的代码打包成可以在浏览器中运行的 JavaScript 文件。
Rollup：Rollup 是另一个模块化打包工具，它与 Webpack 类似，但它更轻量级，更适合于构建小型项目。

使用 Electron-Builder 打包

Electron-Builder 是一个跨平台的桌面应用程序打包工具，它支持 Windows、macOS 和 Linux 系统。它提供了丰富的功能和选项，可以轻松地将您的应用程序打包成多种格式，包括 Windows Installer（.exe）、macOS App Bundle（.app）和 Linux AppImage（.AppImage）。

安装 Electron-Builder

npm install electron-builder --save-dev

配置 Electron-Builder

在您的项目根目录下，创建一个名为 electron-builder.json 的配置文件，并在其中指定应用程序的配置信息。

{
  "productName": "My App",
  "appId": "com.example.myapp",
  "version": "1.0.0",
  "copyright": "Copyright © 2023 Example Corp.",
  "directories": {
    "output": "dist"
  },
  "asar": true,
  "files": [
    "dist/**/*",
    "package.json"
  ],
  "win": {
    "target": [
      "nsis",
      "portable"
    ]
  },
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true
  },
  "mac": {
    "target": "dmg"
  },
  "linux": {
    "target": "AppImage"
  }
}

打包应用程序

npx electron-builder --win --mac --linux

使用 Webpack 打包

Webpack 是一个模块化打包工具，它可以将您的代码打包成可以在浏览器中运行的 JavaScript 文件。

安装 Webpack

npm install webpack --save-dev

配置 Webpack

在您的项目根目录下，创建一个名为 webpack.config.js 的配置文件，并在其中指定应用程序的配置信息。

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

打包应用程序

npx webpack

使用 Rollup 打包

Rollup 是另一个模块化打包工具，它与 Webpack 类似，但它更轻量级，更适合于构建小型项目。

安装 Rollup

npm install rollup --save-dev

配置 Rollup

在您的项目根目录下，创建一个名为 rollup.config.js 的配置文件，并在其中指定应用程序的配置信息。

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import vue from 'rollup-plugin-vue';
import css from 'rollup-plugin-css-only';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/main.js',
    format: 'cjs'
  },
  plugins: [
    resolve(),
    commonjs(),
    vue(),
    css()
  ]
};