Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Please fix plugin to work properly with latest 3.3.0 version of vue-cli-plugin.

See original GitHub issue

Describe the bug

After updating my vue-cli-plugin to latest 3.3.0 version, i start to get the blank screen on builded electron application. Application works correctly when i run electron:serve command, but shows blank screen after build.

I think this can be caused by this change, if you use baseUrl in your plugin. feat: deprecate confusing baseUrl option, use publicPath instead

package.json

"dependencies": {
    "aws-sdk": "^2.384.0",
    "electron-default-menu": "^1.0.1",
    "element-ui": "^2.4.11",
    "vue": "^2.5.21",
    "vue-awesome": "^3.3.1",
    "vue-class-component": "^6.3.2",
    "vue-json-editor": "^1.2.3",
    "vue-property-decorator": "^7.2.0",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.1"
  },
  "devDependencies": {
    "@types/jest": "^23.3.12",
    "@vue/cli-plugin-babel": "3.2.0",
    "@vue/cli-plugin-typescript": "3.2.0",
    "@vue/cli-plugin-unit-jest": "3.2.0",
->  "@vue/cli-service": "3.2.0",
    "@vue/test-utils": "^1.0.0-beta.28",
    "babel-core": "^6.26.3",
    "electron": "^4.0.1",
    "element-theme-dark": "^1.0.2",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "ts-jest": "^23.10.5",
    "typescript": "^3.2.2",
    "vue-cli-plugin-electron-builder": "^1.0.0-rc.10",
    "vue-cli-plugin-element": "^1.0.0",
    "vue-template-compiler": "^2.5.21"
  },

Electron-builder-configs

appId: com.dynamodb.guiclient
productName: DynamoDbGUI
artifactName: "${productName}-${os}-${arch}-${version}.${ext}"
files:
  - "**/*"
  - "!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme,test,__tests__,tests,powered-test,example,examples,*.d.ts}"
  - "!**/node_modules/.bin"
  - "!**/._*"
  - "!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,__pycache__,thumbs.db,.gitignore,.gitattributes,.editorconfig,.flowconfig,.yarn-metadata.json,.idea,appveyor.yml,.travis.yml,circle.yml,npm-debug.log,.nyc_output,yarn.lock,.yarn-integrity}"
asar: true
compression: store
dmg:
  icon: "public/icon.icns"
  contents:
    - x: 532
      y: 249
      type: link
      path: /Applications
    - x: 281
      y: 249
      type: file
linux:
  description: "DynamoDb GUI Client"
  target:
    - deb
    - AppImage
  maintainer: "Misak Poghosyan <poghosyanmisak97@gmail.com>"
win:
  icon: "public/icon.ico"
nsis:
  perMachine: true
  oneClick: true

background.ts

'use strict';

import { app, protocol, BrowserWindow, shell, Menu } from 'electron';
import defaultMenu from 'electron-default-menu';
import {
  createProtocol,
  installVueDevtools,
} from 'vue-cli-plugin-electron-builder/lib';
const isDevelopment = process.env.NODE_ENV !== 'production';

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win: any;

// Standard scheme must be registered before the app is ready
protocol.registerStandardSchemes(['app'], { secure: true });
function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1400,
    height: 900,
    center: true,
    show: false,
  });
  win.once('ready-to-show', () => {
    win.show();
  });
  if (isDevelopment) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
    if (!process.env.IS_TEST) {
      win.webContents.openDevTools();
    }
  } else {
    createProtocol('app');
    // Load the index.html when not in development
    win.loadFile('index.html');
  }

  win.on('closed', () => {
    win = null;
  });
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  const menu = defaultMenu(app, shell);
  Menu.setApplicationMenu(Menu.buildFromTemplate(menu));
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    await installVueDevtools();
  }
  createWindow();
});

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit();
      }
    });
  } else {
    process.on('SIGTERM', () => {
      app.quit();
    });
  }
}