使用 electron 在 app.asar 中包含额外的文件

Question

这是一个带有 electron-builder 的 Vue 应用程序

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
  },
  "main": "background.js",
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.3.2",
    "vuetify": "^2.2.33"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-typescript": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "electron": "^6.1.12",
    "typescript": "^3.9.5",
    "vue-cli-plugin-electron-builder": "~1.4.6",
    "vue-cli-plugin-vuetify": "~2.0.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  }
}

当我使用npm run electron:build时，生成了这个结构：

这是 app.asar 的内容：

background.js 包括所有依赖项。 有一些外部模块（来自 node_modules）使用fs.readFile(__dirpath + '/file')类的东西读取文件。 正如预期的那样，这些文件未包含在生成的包中，因此我需要添加它们。

我试过在 vue.config.js 中使用它：

module.exports = {
  lintOnSave: true,
  transpileDependencies: [
    'vuetify'
  ],
  configureWebpack: {
    devtool: 'source-map'
  },
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        extraFiles: [
          'node_modules/module/file'
        ]
      }
    }
  }
}

但是该文件包含在 app.asar 之外，即使有extraResources ，因此fs.readFile(__dirpath + '/file')没有找到该文件。

如何在 app.asar 中包含文件？

Answer 1

我发现的唯一方法是使用公共目录。 public/中的任何文件都将被复制到 app.asar。

但是，我需要复制的文件属于一个外部库，所以为了不让这个文件成为我项目的一部分，我使用 npm 脚本在构建之前对其进行了 gitignored 并复制。

"scripts": {
    "build": "cp node_modules/lib/file public && vue-cli-service electron:build -wl",
    "serve": "mkdir -p dist_electron && cp node_modules/lib/file dist_electron && vue-cli-service electron:serve"
  }

Answer 2

我发现files的路径必须是dist_electron/bundled （或其他目录）的相对路径。 因此，如果我们在根目录中有名为keys的目录，则配置应该类似于下面的内容。

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      builderOptions: {
        files: [
          "**/*",
          {
            from: "../../keys",
            to: "./keys",
            filter: ["**/*"],
          },
        ],
      },
    },
  },
};