search

shellyln / vue-electron-typescript-quickstart

A boilerplate of Electron app that uses Vue in TypeScript.
30 stars 7 forks source link

Blank window after reloading page #3

Open Lothindir opened 4 years ago

Lothindir commented 4 years ago

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

Reproduction steps :

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.

shellyln commented 4 years ago

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

shellyln commented 4 years ago

Plus, you should change here

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

dengyushuai commented 3 years ago

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

Lothindir commented 3 years ago

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

shellyln commented 3 years ago

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

  1. The baseUrl or publicPath in the current Vue CLI configuration is set to the default value /,
  2. And even if specifying ./, it doesn't work well when the URL schema is file:.
  3. 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.

dengyushuai commented 3 years ago

Thank you. Let me check again @Lothindir @shellyln