It's a Vue app with electron-builder

{
  "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-ponent": "^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-piler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  }
}

When I use npm run electron:build, this structure is generated:

And this is the content of app.asar:

background.js include all the dependencies. There are some external modules (from node_modules) that read files using something like fs.readFile(__dirpath + '/file'). As expected, these files are not included in the generated bundle, so I need to add them.

I've tried to use this in vue.config.js:

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

But the file is included outside the app.asar, even with extraResources, and thus fs.readFile(__dirpath + '/file') did not find the file.

How can I include files inside app.asar?

It's a Vue app with electron-builder

{
  "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-ponent": "^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-piler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  }
}

When I use npm run electron:build, this structure is generated:

And this is the content of app.asar:

background.js include all the dependencies. There are some external modules (from node_modules) that read files using something like fs.readFile(__dirpath + '/file'). As expected, these files are not included in the generated bundle, so I need to add them.

I've tried to use this in vue.config.js:

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

But the file is included outside the app.asar, even with extraResources, and thus fs.readFile(__dirpath + '/file') did not find the file.

How can I include files inside app.asar?

• javascript
• vue.js
• electron

• I don't know how vue bundles your files, but extraResources and extraFiles in the electron-builder config does exactly the opposite of what you want to do: include files in the installer but outside of the asar. The files array may do the trick, as it specifies which files are to be included into the bundle. – Rhayene Commented Jun 16, 2020 at 20:27
• Interesting. It has a default value, should I repeat all those stuff, and add my file, or should I just add my file? – Paulo Candido Commented Jun 17, 2020 at 16:15
• files: ['**/*', '**/node_modules/lib/file']. I did not work. But I fond another way, add the file in the dir 'public'. Since it belongs to an external lib, I gitignored the file and copy it before the build (using npm scripts). – Paulo Candido Commented Jun 17, 2020 at 18:11

2 Answers 2

The only way I found was using the public directory. Any file inside public/ will be copied to app.asar.

However, the file I need to copy belongs to an external lib, so to not make this file part of my project, I gitignored it and copy just before the build, using npm scripts.

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

I found out the path for files have to be relative path from dist_electron/bundled(or maybe other directory). So if we have directory named keys in root, the config should to be something like bellow.

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