Recently, I successfully integrated Electron into my Vue app with the help of the Vue CLI Plugin Electron Builder. During development, all API requests were properly directed to the address specified in my vue.config.js:
proxy: {
'^/api': {
target: 'http://my-api:3000',
changeOrigin: true
},
},
For instance, when I made an Axios POST request to /api/open_session/, it was correctly sent to http://my-api/api/open_session.
However, upon building the project, a unique app:// protocol was generated to open the index.html file. This protocol also applied to all URLs starting with app://, including API requests.
In my background.js, the logic for loading the URL differed based on the environment:
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
}
else {
createProtocol('app');
// Load the index.html when not in development
win.loadURL('app://./index.html');
}
My primary concern is to ensure that these URL paths are directed to my API, while still allowing all my files to be accessed as usual via the app protocol.