javascript - 使用 Electron 在 app.asar 中包含额外文件

Question

这是一个带有 Electron 生成器的 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)目录。 public/ 中的任何文件将被复制到 app.asar。

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

"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"
  }