vue-electron-typescript-quickstart Blank window after reloading page

Hello, I found an issue where the window goes blank after doing a Reload or a Force Reload.

Reproduction steps :

Building the app with npm run build:dev and npm run build:mainproc
Launching the app with npm run start
Pressing either Ctrl+R or Ctrl+Shift+R (or clicking on View->Reload or Force Reload)

Result : The page goes blank, the html looks like this :

<html>
    <head>
    </head>
    <body>
    </body>
</html>

and the console outputs an error : chromewebdata/:1 Not allowed to load local resource: file:///C:/

The only way to (temporary) resolve the problem is to close and re-open the app.

Mar 28 '20 12:03 Lothindir

Hi, @Lothindir ! Thanks for posting the issue.

It is expected behavior.

https://github.com/shellyln/vue-electron-typescript-quickstart/blob/d450cbbb26f199e68ef39f784df02d769be079b1/src.mainproc/windows/MainWindow.ts#L32

BrowserWindow::loadFile don't set window.location correctly.

If you want to implement reload command, you can use BrowserWindow::loadURL instead of BrowserWindow::loadFile.

https://github.com/shellyln/vue-electron-typescript-quickstart/blob/d450cbbb26f199e68ef39f784df02d769be079b1/src.mainproc/windows/UserContentWindow.ts#L33

See also: https://github.com/electron/electron/issues/11895

Mar 28 '20 13:03 shellyln

Plus, you should change here

https://github.com/shellyln/vue-electron-typescript-quickstart/blob/d450cbbb26f199e68ef39f784df02d769be079b1/src.mainproc/main.ts#L32-L54

Mar 28 '20 13:03 shellyln

Hi, I want to start hot loading. How do I start it? I used this for the first time. @Lothindir

Dec 28 '20 11:12 dengyushuai

Hey @dengyushuai, do you want to use it for developpement or for production purposes ? If you want to hot reload while developping you can use smth like nodemon to watch your files for changes and then rebuild and restart your application. It's more complicated to implement a hot reload in your app. If you really want to be able to reload a page look at this answer. Hope this helps...

Hi, @Lothindir ! Thanks for posting the issue.

It is expected behavior.

https://github.com/shellyln/vue-electron-typescript-quickstart/blob/d450cbbb26f199e68ef39f784df02d769be079b1/src.mainproc/windows/MainWindow.ts#L32

BrowserWindow::loadFile don't set window.location correctly.

If you want to implement reload command, you can use BrowserWindow::loadURL instead of BrowserWindow::loadFile.

https://github.com/shellyln/vue-electron-typescript-quickstart/blob/d450cbbb26f199e68ef39f784df02d769be079b1/src.mainproc/windows/UserContentWindow.ts#L33

See also: electron/electron#11895

Dec 28 '20 13:12 Lothindir

Hi @Lothindir, The real reasons to see a blank page on reload are these:

The baseUrl or publicPath in the current Vue CLI configuration is set to the default value /,
And even if specifying ./, it doesn't work well when the URL schema is file:.
I am not using the hash mode of Vue Router.

When you reloading, current location of page have already changed to root directory by Vue Router.

You can add path conversion (/ -> path/to/dist/main-window.html) to following code. https://github.com/shellyln/vue-electron-typescript-quickstart/blob/e44daa30b22a65cbd7d3f355cefb12f64b584160/src.mainproc/main.ts#L44-L49 If you should use multiple entry points, try to change baseUrl of Vue CLI config for each entry points. https://cli.vuejs.org/config/#vue-config-js

Hi @dengyushuai, If you want to do hot loading during development, you need to use lite-server etc. Whether it's dev / prod, you need to use BrowserWindow::loadURL, as @Lothindir says.

Dec 28 '20 14:12 shellyln

Thank you. Let me check again @Lothindir @shellyln

Dec 29 '20 00:12 dengyushuai