Electronic builder automatically changes application name and default installation location


Electronic builder automatically changes application name and default installation location

Let’s talk about what we’ve done, that is, we’ve passed thecross-envSet several different environment variables, and then executeelectron-builderPreviously, the packaging related configuration file was regenerated based on the template string. The purpose is to automatically generate the corresponding shortcut name and default installation location when packaging different interfaces and environments. Otherwise, you need to modify the configuration file every time you package. Of course, you can choose the installation location by yourself, but we expect it to be simple enough to go directly to the next step.

1. Set up different environments through cross env

Of course, you need to install this module first. Executenpm install --save-dev cross-envYes. Its function is to add some custom environment variables, but this variable is only used in packaging. If you call it in the rendering module, there will be no such variable. For example, I defined it in package.jsonAPIThis variable:

  "name": "xxxx",
  "scripts": {
    "build": "cross-env API=production node .electron-vue/build.js && electron-builder",
    "build:test": "cross-env API=test node .electron-vue/build.js && electron-builder"
  "dependencies": {
  "devDependencies": {
    "cross-env": "^5.1.6",

2. Generate configuration file according to template string

2.1 define the template string of the electronic buidler configuration

In addition to defining the configuration of electronic builder in package.json, it can also be picked up as a file by itself. The name iselectron-builder.json。 I am defined in a JS moduletemplate-builder, the code is as follows:

module.exports = {
    template: "{\n" +
        "  \"productName\": \"$productName\",\n" +
        "  \"appId\": \"$appId\",\n" +
        "  \"directories\": {\n" +
        "    \"output\": \"build\"\n" +
        "  },\n" +
        "  \"files\": [\n" +
        "    \"dist/electron/**/*\"\n" +
        "  ],\n" +
        "  \"dmg\": {\n" +
        "  },\n" +
        "  \"win\": {\n" +
        "    \"icon\": \"build/icons/win.ico\",\n" +
        "    \"target\": \"nsis\"\n" +
        "  },\n" +
        "  \"nsis\": {\n" +
        "  },\n" +
        "  \"artifactName\": \"${productName}_Setup_${version}.${ext}\",\n" +
        "  \"linux\": {\n" +
        "  }\n" +

Here are two strings to replace$productNameand$appIdBy replacing these two strings, a new string will be generated and written directly to theelectron-builder.jsonin

2.2 template string defining the default installation location

If you need to modify the default installation location, you need to add configuration in NSIS

  "productName": "xxxx",
  "nsis": {
    "oneClick": false,
    "include": "installer.nsh"

This file is also generated automatically with a string template. Here, the directory is defined in the root directory, so the generated file should be placed in the root directory of the project. The name isinstaller.nshString template is also defined in a JS moduletemplate-install, the code is as follows:

module.exports = {
    template: "!macro preInit\n" +
        "\tSetRegView 64\n" +
        "\tWriteRegExpandStr HKLM \"${INSTALL_REGISTRY_KEY}\" InstallLocation \"$LOCALAPPDATA\programs\$dirName\"\n" +
        "\tWriteRegExpandStr HKCU \"${INSTALL_REGISTRY_KEY}\" InstallLocation \"$LOCALAPPDATA\programs\$dirName\"\n" +
        "\tSetRegView 32\n" +
        "\tWriteRegExpandStr HKLM \"${INSTALL_REGISTRY_KEY}\" InstallLocation \"$LOCALAPPDATA\programs\$dirName\"\n" +
        "\tWriteRegExpandStr HKCU \"${INSTALL_REGISTRY_KEY}\" InstallLocation \"$LOCALAPPDATA\programs\$dirName\"\n" +

When generating new files, dynamically replace the default$dirNameStrings are then automatically spliced into a new string,$LOCALAPPDATAIt is the default directory in NSIS, which can be modified according to your own needs.

2.3 define a module to generate configuration file

The code is as follows:

const fs = require('fs');
const path = require('path');
const installTemplate = require('./template-install');
const builderTemplate = require('./template-builder');

function generateInstallNsh() {
    let name = require('../package').name;
    Let ProductName = 'client shortcut name';
    let appId = name + '-client';
    if (process.env.API === 'test') {
        name += '-test';
        productName += '-test';
        appId += '-test';

    console.log('generating install config file...\n');
    Let installerfile = path. Resolve ('.. / installer. NSH'); // this is what windows wrote directly
    if (fs.existsSync(installerFile)) {

    let installStr = installTemplate.template;
    let targetInstallTemplate = installStr.replace(/$dirName/g, name);
    fs.writeFileSync(installerFile, targetInstallTemplate);

    console.log('generating builder config file...\n');
    let builderFile = path.resolve('../installer.nsh');
    if (fs.existsSync(builderFile)) {

    let builderStr = builderTemplate.template;
    let targetBuilderTemplate = builderStr.replace(/$productName/, productName);
    targetBuilderTemplate = builderStr.replace(/$appId/, appId);
    fs.writeFileSync(builderFile, targetBuilderTemplate);

    console.log('generate has finished \n');

module.exports.generateInstallNsh = generateInstallNsh;

stayelectorn-builderIt can be executed before. My Vue template is.electron-vue/build.jsModule.

2.4 add. Gitignore file

Put theinstaller.nshandelectron-builder.jsonTwo files are added to the. Gitignore file, because they are now generated dynamically and will change.

Recommended Today

Deeply analyze the principle and practice of RSA key

1、 Preface After experiencing many dark moments in life, when you read this article, you will regret and even be angry: why didn’t you write this article earlier?! Your darkest moments include: 1. Your project needs to be connected with the bank, and the other party needs you to provide an encryption certificate. You have […]