Electron-vue: npm run build 打出来的包，安装后，什么都不显示，白屏？

[Sailiy]

os：windows 10
node version : v8.7.0
npm version: 5.4.2

npm run dev :

npm run build:
build ok

installed:

[Sailiy]

mac 系统上也是如此，请帮助我

[SimulatedGREG]

I'd love to help, but I need some information on how to reproduce this.

[ChimingPhang]

i meet this problem too, how can i solve it?

[wulie88]

add openDevTools in src/main/index.js at createWindow after mainWindow.loadURL, then watch the console and find out

mainWindow.openDevTools();

[Sailiy]

windows 平台，使用yarn 可以成功打包安装运行。如果使用npm工具， 能打包成功，但是会出现上边的情况。
mac系统使用yarn 和npm 打包，都会出现白屏.

Windows platform, using yarn can be successfully packaged and installed.If you use NPM, you can package it successfully, but it will be up there.
The MAC system USES both the yarn and the NPM packaging, and the white screen appears.

[MiYogurt]

it look like axios not found。 because not package into bundle file

so we need change externals ，or edit let whiteListedModules = ['vue' , 'vue-router', 'axios', .....] add the package denpendency to the whiteListedModules ，or externals: whiteListedModules 。

now ， it's working。

最主要原因还是 axios 被排除了，找不到肯定就白屏了，修改renderer打包配置，修改 externals 就行了，粗暴点，删除这个配置项也可以。

[biaomingzhong]

@MiYogurt Thanks. It works!!!

[lienren]

@MiYogurt 就你这个管用！

[gabrielstuff]

I confirm that if you have added:

• vue-router
• axios
• vuex
• vue-electron
  and you try to package with electron-packager then you need to change the whiteListedModules variable inside webpack.renderer.config.js to:

let whiteListedModules = ['vue' , 'vue-router', 'axios', 'vuex', 'vue-electron']

Then yarn run build:darwin works and the app does not throw a blank screen.

The weird thing is that using electron-builder the app build and run correctly even if let whiteListedModules contains only ['vue'].

any hint @SimulatedGREG ?

Thanks @MiYogurt

[wxytongxue]

用electron-vue编写，npm run dev运行正常，electron-builder 打包后，第一个窗口显示正常，当在第一个窗口点击开启第二个窗口时，第二个窗口空白，但是将
newWindow.loadURL(winURL+'/#/newpage');
里的
winURL+'/#/newpage'替换成winURL，可以正常显示winURL的内容
好久都没找到原因，下面是main主线程的代码

import { ipcMain,app, BrowserWindow } from 'electron'

/**
 * Set `__static` path to static files in production
 * [url=https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html]https://simulatedgreg.gitbooks ... .html[/url]
 */
if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

let mainWindow
let newWindow
const winURL = process.env.NODE_ENV === 'development'
  ? `[url=http://localhost:9080]http://localhost:9080[/url]`
  : `file://${__dirname}/index.html`

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000
  })

  mainWindow.loadURL(winURL)

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

    newWindow = new BrowserWindow({
        height: 563,
        useContentSize: true,
        show:false,
        width: 1000
    })
    newWindow.loadURL(winURL+'/#/newpage');
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

ipcMain.on('open-new', e=>{
        mainWindow.hide();
        newWindow.show();
    }
);


/**
 * Auto Updater
 *
 * Uncomment the following code below and install `electron-updater` to
 * support auto updating. Code Signing with a valid certificate is required.
 * [url=https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating]https://simulatedgreg.gitbooks ... ating[/url]
 */

/*
import { autoUpdater } from 'electron-updater'

autoUpdater.on('update-downloaded', () => {
  autoUpdater.quitAndInstall()
})

app.on('ready', () => {
  if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates()
})
 */

[Gtanxingwen]

@wxytongxue I have the same problem. How do you solve it?

[wxytongxue]

@Gtanxingwen 只用一个窗口，改变路由，暂时是这样解决的

[qiandingqin]

@MiYogurt 谢谢 这个问题困扰了很久

[Fisher-Wong]

@MiYogurt

谢谢！！！

I try your method and fix the problem.
I can fix the gui blank execption and run the electron-vue demo-app normally.

But I still get two error when I build the project.

external "electron" not cacheable
external "path" not cacheable

have you meet these problem?

or anyone has meet this problem?

thanks

[MiYogurt]

@Fisher-Wong open the chrome devtool and see the error log 。 electron should be is external lib and did not be cache

[reykjalin]

@Fisher-Wong The build worked for me despite showing those errors. Have you tried running the output file generated by the build?

[topul]

@wxytongxue newWindow.loadURL(winURL+'#newpage'); 这样写就可以了，#前后不要加斜杠

[itslit-tech]

@SimulatedGREG
HI, I am getting a few errors similar to this after packaging the app. There is a different error each time. The app works fine in the dev mode (npm run dev).

Any help will be appreciated. Thanks :)

(Unknown characters in the compiled renderer.js)

( Packaged app on MacOS with dev-tools open)

[chaiyingmin]

用electron-vue编写，npm run dev运行正常，electron-builder 打包后，第一个窗口显示正常，当在第一个窗口点击开启第二个窗口时，第二个窗口空白，但是将
newWindow.loadURL(winURL+'/#/newpage');
里的
winURL+'/#/newpage'替换成winURL，可以正常显示winURL的内容
好久都没找到原因，下面是main主线程的代码

import { ipcMain,app, BrowserWindow } from 'electron'

/**
 * Set `__static` path to static files in production
 * [url=https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html]https://simulatedgreg.gitbooks ... .html[/url]
 */
if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

let mainWindow
let newWindow
const winURL = process.env.NODE_ENV === 'development'
  ? `[url=http://localhost:9080]http://localhost:9080[/url]`
  : `file://${__dirname}/index.html`

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000
  })

  mainWindow.loadURL(winURL)

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

    newWindow = new BrowserWindow({
        height: 563,
        useContentSize: true,
        show:false,
        width: 1000
    })
    newWindow.loadURL(winURL+'/#/newpage');
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

ipcMain.on('open-new', e=>{
        mainWindow.hide();
        newWindow.show();
    }
);


/**
 * Auto Updater
 *
 * Uncomment the following code below and install `electron-updater` to
 * support auto updating. Code Signing with a valid certificate is required.
 * [url=https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating]https://simulatedgreg.gitbooks ... ating[/url]
 */

/*
import { autoUpdater } from 'electron-updater'

autoUpdater.on('update-downloaded', () => {
  autoUpdater.quitAndInstall()
})

app.on('ready', () => {
  if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates()
})
 */

默认的地址是 xxx/index.html，但是路由加上去之后，index.html/#/newpage 是一个文件，， index.html/# 和 index.html#，是两个效果，解决办法：/#/ => #/，

感谢各路优秀的人相助，我也在这里贴出解决办法

[AKclown]

我也遇到了程序npm run dev正常，打包就白屏了 报错信息TypeError: Cannot read property 'profile' of null。希望各位顶端人士能够解答一下

[AKclown]

[AKclown]

https://blog.csdn.net/ayhao369csdn/article/details/80998090 问题解决，这个问题主要可能是请求的字段不存在，查看你的程序代码，注销该字段

[Junchao-Jiang]

it look like axios not found。 because not package into bundle file

so we need change externals ，or edit let whiteListedModules = ['vue' , 'vue-router', 'axios', .....] add the package denpendency to the whiteListedModules ，or externals: whiteListedModules 。

now ， it's working。

最主要原因还是 axios 被排除了，找不到肯定就白屏了，修改renderer打包配置，修改 externals 就行了，粗暴点，删除这个配置项也可以。

大佬，我把那段代码注释了之后会报错诶...
ERROR in unknown: Duplicate declaration "buffer"
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 533 KiB 0
Entrypoint undefined = index.html
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 1.09 KiB {0} [built]
[1] ./node_modules/lodash/lodash.js 528 KiB {0} [built]
[2] (webpack)/buildin/module.js 497 bytes {0} [built]

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: node .electron-vue/build.js && electron-builder
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\12446\AppData\Roaming\npm-cache_logs\2019-12-07T04_16_17_259Z-debug.log

[ping-xiong]

It works for me.

Change:
const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })
to
const router = new VueRouter({ mode: 'hash', base: process.env.BASE_URL, routes })

[sunshineLixun]

@ping-xiong Thanks

[zsjabjj]

我遇到的刚好相反, npm run dev白屏, build之后正常, 有大佬知道为什么吗?下面是我运行npm run dev 之后的终端打印

D:\auto\ar-project>npm run dev

> [email protected] dev D:\auto\ar-project
> node .electron-vue/dev-runner.js

         ___                      __
   __   /\_ \       __     ___   /\ \__    _ __    ___     ___              __  __  __  __     __
 / ,.`\ \//\ \    / ,.`\  /'___\ \ \ ,_\  /\` __\ / __`\ /' _ `\   _______ /\ \/\ \/\ \/\ \  / ,.`\
/\  __/   \_\ \_ /\  __/ /\ \__/  \ \ \/  \ \ \/ /\ \_\ \/\ \/\ \ /\______\\ \ \/ |\ \ \_\ \/\  __/
\ \____\  /\____\\ \____\\ \____\  \ \ \_  \ \_\ \ \____/\ \_\ \_\\/______/ \ \___/ \ \____/\ \____\
 \/____/  \/____/ \/____/ \/____/   \ \__\  \/_/  \/___/  \/_/\/_/           \/__/   \/___/  \/____/
                                     \/__/
  getting ready...

┏ Main Process ---------------

  compiling...

┗ ----------------------------

┏ Renderer Process -----------

  Hash: 1fc850d234a4f1f8fa80
  Version: webpack 4.44.0
  Time: 4280ms
  Built at: 2020-07-28 2:48:54 PM
                  Asset       Size    Chunks             Chunk Names
  imgs/logo--assets.png   60.4 KiB            [emitted]
             index.html  404 bytes            [emitted]
            renderer.js    1.8 MiB  renderer  [emitted]  renderer
  Entrypoint renderer = renderer.js
  [1] multi (webpack)-dev-server/client?http://localhost ./.electron-vue/dev-client ./src/renderer/main.js 52 bytes {renderer} [built]
  [./.electron-vue/dev-client.js] 731 bytes {renderer} [built]
  [./node_modules/strip-ansi/index.js] 161 bytes {renderer} [built]
  [./node_modules/vue/dist/vue.esm.js] 319 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 4.29 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {renderer} [built]
  [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {renderer} [built]
  [./node_modules/webpack-hot-middleware/client.js?noInfo=true&reload=true] (webpack)-hot-middleware/client.js?noInfo=true&reload=true 7.68 KiB {renderer} [built]
  [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {renderer} [built]
  [./src/renderer/App.vue] 1.1 KiB {renderer} [built]
  [./src/renderer/main.js] 382 bytes {renderer} [built]
      + 61 hidden modules
  Child html-webpack-plugin for "index.html":
           Asset      Size  Chunks  Chunk Names
      index.html  1.37 MiB       0
      Entrypoint undefined = index.html
      [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs] 1.15 KiB {0} [built]
      [./node_modules/lodash/lodash.js] 530 KiB {0} [built]
      [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]

┗ ----------------------------

┏ Main Process ---------------

  Hash: 88bb6d703c6351e1cebb
  Version: webpack 4.44.0
  Time: 4833ms
  Built at: 2020-07-28 2:48:55 PM
    Asset     Size  Chunks             Chunk Names
  main.js  218 KiB    main  [emitted]  main
  Entrypoint main = main.js
  [0] multi ./src/main/index.dev.js ./src/main/index.js 40 bytes {main} [built]
  [./node_modules/cross-unzip/index.js] 1.5 KiB {main} [built]
  [./node_modules/electron-debug sync recursive] ./node_modules/electron-debug sync 160 bytes {main} [built]
  [./node_modules/electron-debug/index.js] 2.46 KiB {main} [built]
  [./node_modules/electron-devtools-installer/dist/downloadChromeExtension.js] 2.26 KiB {main} [built]
  [./node_modules/electron-devtools-installer/dist/index.js] 5.02 KiB {main} [built]
  [./node_modules/electron-devtools-installer/dist/utils.js] 1.88 KiB {main} [built]
  [./node_modules/electron-is-dev/index.js] 256 bytes {main} [built]
  [./node_modules/electron-localshortcut/index.js] 8.78 KiB {main} [built]
  [./node_modules/semver/semver.js] 37.9 KiB {main} [built]
  [./src/main/index.dev.js] 342 bytes {main} [built]
  [./src/main/index.js] 801 bytes {main} [built]
  [electron] external "electron" 42 bytes {main} [built]
  [fs] external "fs" 42 bytes {main} [built]
  [path] external "path" 42 bytes {main} [built]
      + 33 hidden modules

  WARNING in ./node_modules/electron-debug/index.js 81:45-58
  Critical dependency: the request of a dependency is an expression
   @ ./src/main/index.dev.js
   @ multi ./src/main/index.dev.js ./src/main/index.js

  WARNING in ./node_modules/electron-debug/index.js 84:85-106
  Critical dependency: the request of a dependency is an expression
   @ ./src/main/index.dev.js
   @ multi ./src/main/index.dev.js ./src/main/index.js

┗ ----------------------------

┏ Electron -------------------

  Debugger listening on ws://127.0.0.1:5858/8
┗ ----------------------------

┏ Electron -------------------

  2023a2f-67d4-4e8d-a501-75630b89c4b0
  For help see https://nodejs.org/en/docs/inspector

┗ ----------------------------

[DuannHang]

@wxytongxue newWindow.loadURL(winURL+'#newpage'); 这样写就可以了，#前后不要加斜杠

TKS A LOOOOOT!
This problem has bothered me for a long time. According to your workaround, I tried，it works!