node.jsvue.jsvuejs2electronelectron-vue

Preload not working/compiled correctly in production (Electron-vue SimulatedGREG)


I have a preload script that is working well in development. I've seen here that I either need to use a static file or webpack. I went with the static approach because my knowledge is zero with the webpack one.

Currently, I'm using a webview, and this webview has the preload as following:

<webview :id="webview.key" :src="webview.url" :preload="preload_path" style="height: 100%" pcontextIsolation></webview>

the preload_path is as following:

preload_path: `file://${path.join(__static, '/serverBrowserIPC.js')}`,

my project's structure is:

- dist
- - static 
    serverBrowserIPC.js 
    api.js
- src 
- - main 
- - renderer 

the preload file is serverBrowserIPC.js, and serverBrowserIPC.js requires api.js

require("./api.js")

For known reasons that I'm not aware of, the preload is not working and it's throwing the following error:

F:\Web\my-project\build\win-unpacked\resources\app.asar\dist\electron\static\serverBrowserIPC.js

For me, it doesn't make sense, because I have already stated it's in a static folder, but the electron-app is deciding to access it through the bundled app.asar.

I hope someone helps me with this.


Solution

  • To me it seems the issue is that your project structure is slightly wrong. The static directory is supposed to be located in the project root directory. When you build your app for production that directory will get copied into the app.asar directory. That's why its looking there. But, since there is no static directory in the root directory nothing gets copied over.

    To check the project directory structure check the following documentation page: https://webpack.electron.build/project-structure