I created a web application using vue-cli and packaged it into a Windows application using Electron. To enable local content updates by modifying configuration files in the installation directory and adding new files to the resources directory after installation, I utilized Electron's built-in APIs. In preload.js, I created a getConfig() method that accesses the resources directory in the software's installation path and exposes file reading capabilities to the Vue application. The Vue app can then access configuration files and image resources through window.electronAPI.getConfig.

This worked perfectly in a single-page setup. However, strange issues emerged after introducing Vue Router and Pinia:

1. In App.vue, I have a <PageHeader> component and a <RouterView>. The PageHeader component cannot display background images through CSS styling regardless of how I configure it.

2. When trying to fetch configuration files during App.vue's onMounted lifecycle hooks and store them in Pinia, the PageHeader component cannot access the store data in any lifecycle hooks.

3. Even more puzzling: none of the console.log statements in the lifecycle hooks execute.

Could any experts help shed light on this? I'd be happy to provide relevant code snippets if needed. Thank you in advance!