Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Blank window after reloading page #3

Open
Lothindir opened this issue Mar 28, 2020 · 6 comments
Open

Blank window after reloading page #3

Lothindir opened this issue Mar 28, 2020 · 6 comments

Comments

@Lothindir
Copy link

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.
@shellyln
Copy link
Owner

Hi, @Lothindir ! Thanks for posting the issue.

It is expected behavior.

vue-electron-typescript-quickstart/src.mainproc/windows/MainWindow.ts

Line 32 in d450cbb

mainWindow.loadFile(path.join(app.getAppPath(), 'dist/main-window.html'));

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

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

vue-electron-typescript-quickstart/src.mainproc/windows/UserContentWindow.ts

Line 33 in d450cbb

userContentWindow.loadURL('https://shellyln.github.io/');

See also: electron/electron#11895

@shellyln
Copy link
Owner

Plus, you should change here

vue-electron-typescript-quickstart/src.mainproc/main.ts

Lines 32 to 54 in d450cbb

protocol.interceptFileProtocol('file', (req, callback) => {
let filePath = new url.URL(req.url).pathname;
if (process.platform === 'win32') {
if (filePath.match(/^\/[A-Za-z]:/)) {
filePath = filePath.slice(1);
}
if (filePath.match(/^[A-Za-z]:\/(css|img|js)/)) {
filePath = path.join(app.getAppPath(), 'dist', filePath.slice(3));
} else if (filePath.match(/^[A-Za-z]:\/[^/\\]+?\.(js|css|png|jpeg|jpg|ico|svg)$/)) {
// case of "vue-cli-service build --mode development"
filePath = path.join(app.getAppPath(), 'dist', filePath.slice(3));
}
} else {
if (filePath.match(/^\/(css|img|js)/)) {
filePath = path.join(app.getAppPath(), 'dist', filePath.slice(1));
} else if (filePath.match(/^\/[^/\\]+?\.(js|css|png|jpeg|jpg|ico|svg)$/)) {
// case of "vue-cli-service build --mode development"
filePath = path.join(app.getAppPath(), 'dist', filePath.slice(1));
}
}
callback(path.normalize(filePath));
});
createMainWindow();

@dengyushuai
Copy link

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

@Lothindir
Copy link
Author

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.

vue-electron-typescript-quickstart/src.mainproc/windows/MainWindow.ts

Line 32 in d450cbb

mainWindow.loadFile(path.join(app.getAppPath(), 'dist/main-window.html'));

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

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

vue-electron-typescript-quickstart/src.mainproc/windows/UserContentWindow.ts

Line 33 in d450cbb

userContentWindow.loadURL('https://shellyln.github.io/');

See also: electron/electron#11895

@shellyln
Copy link
Owner

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.

vue-electron-typescript-quickstart/src.mainproc/main.ts

Lines 44 to 49 in e44daa3

if (filePath.match(/^[A-Za-z]:\/(css|img|js)/)) {
filePath = path.join(app.getAppPath(), 'dist', filePath.slice(3));
} else if (filePath.match(/^[A-Za-z]:\/[^/\\]+?\.(js|css|png|jpeg|jpg|ico|svg)$/)) {
// case of "vue-cli-service build --mode development"
filePath = path.join(app.getAppPath(), 'dist', filePath.slice(3));
}

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
Copy link

Thank you. Let me check again @Lothindir @shellyln

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@shellyln @Lothindir @dengyushuai