该模板使用 2021.12 月最新的 vue3 + typescript + vite 搭建的

命令

  1. build 打包 js模块文件到各自 dist 目录
  2. compiler 打包可执行程序到根目录的 dist 目录

    打包分发至多个平台

    mac 必须在 mac 电脑上打包

  1. # 平台
  2. --mac, --win, --linux, --arm64
  3. # 架构
  4. --ia32, --x64
  5. electron-builder build -mwl

静态资源的引用方式（开发、打包都可以引用的方式）

主要是开发和打包阶段引用方式不一样

实现的原理

  1. electron-builder
    1. files 选项，可以把所有前端文件都打包到默认的 resources/app/ 目录
    2. extraResources 选项，把匹配到的静态资源复制到 resource 目录

  2. vue 会把 public 目录下的文件都直接拷贝到打包目录

    .node 文件（开发/打包阶段）

  3. 位置：.node 文件放在子项目 public 目录

  4. 引用

    1. const {
    2. init, enumDev, connect, getDevInfo, enumApp, openApp, enumContainer, openContainer,
    3. devAuth, createApp, createContainer, destroy,
    4. } = require('./skf.node');

    dll 文件（开发/打包阶段）

    1. // compile 时明确需要打包的文件，打包到 resources/app 中
    2. files: [
    3.  // 把匹配 packages/**/dist/** 的所有文件都拷贝到 /resources/app/packages/**/dist/** 中
    4.  'packages/**/dist/**',
    5. ],
    6. // 拷贝dll等静态文件到 resources/ 的指定位置，./ 表示 app 同级目录
    7. extraResources:  {
    8.  'from': 'resources/app/SkfApi.dll',
    9.  'to': './app/SkfApi.dll',
    10. },

  5. 位置：dll 放在根目录的 resources/app 目录内

  6. 引用：
    1. window.api.init('./resources/app/SkfApi.dll');

    日志

    不指定日志前缀，日志文件开发时会输出在项目根目录，打包后会输出在exe 文件同级目录