使用 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 脚本进行复制。

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