Problem
I’ve created a Vue application with Vite. Afterwards, I’ve installed Electron and Electron Forge. If I create and pack the App, all works fine after installing on my Linux system. But on other systems it doesn’t work.
The reason is, that the index.html loads the main.js from the absolute path of the /dist/assets/ directory which is not obviously not existing on other systems.
How can I config Vite to use the compiled JavaScript from the assets folder, so I can use the packaged (.deb) file on other systems?
Folder structure
├── dist/
│ ├── assets/
│ │ ├── index-<bunchofchars>.js
│ ├── index.html
├── public/
├── src/
│ ├── App.vue
│ └── main.js
├── forge.config.js
├── index.html
├── index.js
├── jsconfig.json
├── package.json
├── preload.json
└── vite.config.js
Source Code
/forge.config.js
const { FusesPlugin } = require('@electron-forge/plugin-fuses');
const { FuseV1Options, FuseVersion } = require('@electron/fuses');
module.exports = {
packagerConfig: {
asar: true,
},
rebuildConfig: {},
makers: [
{
name: '@electron-forge/maker-squirrel',
config: {},
},
{
name: '@electron-forge/maker-zip',
platforms: ['darwin'],
},
{
name: '@electron-forge/maker-deb',
config: {},
},
{
name: '@electron-forge/maker-rpm',
config: {},
},
],
plugins: [
{
name: '@electron-forge/plugin-auto-unpack-natives',
config: {},
},
// Fuses are used to enable/disable various Electron functionality
// at package time, before code signing the application
new FusesPlugin({
version: FuseVersion.V1,
[FuseV1Options.RunAsNode]: false,
[FuseV1Options.EnableCookieEncryption]: true,
[FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
[FuseV1Options.EnableNodeCliInspectArguments]: false,
[FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
[FuseV1Options.OnlyLoadAppFromAsar]: true,
}),
],
};
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>
/index.js
// index.js
const { app, BrowserWindow } = require("electron");
const path = require("path");
const express = require('./backend/app')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
},
});
win.loadFile("dist/index.html");
}
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
/jsconfig.json
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
/package.json
{
"name": "frontend",
"version": "0.0.0",
"private": true,
"main": "index.js",
"author": "The Author",
"description": "A simple test",
"license": "UNLICENSED",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"build-start": "npm run build && electron .",
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
},
"dependencies": {
"axios": "^1.6.8",
"electron-squirrel-startup": "^1.0.0",
"vue": "^3.4.21"
},
"devDependencies": {
"@electron-forge/cli": "^7.4.0",
"@electron-forge/maker-deb": "^7.4.0",
"@electron-forge/maker-rpm": "^7.4.0",
"@electron-forge/maker-squirrel": "^7.4.0",
"@electron-forge/maker-zip": "^7.4.0",
"@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
"@electron-forge/plugin-fuses": "^7.4.0",
"@electron/fuses": "^1.8.0",
"@vitejs/plugin-vue": "^5.0.4",
"electron": "^30.0.2",
"vite": "^5.2.8"
}
}
/preload.js
// preload.js
window.addEventListener("DOMContentLoaded", () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector);
if (element) element.innerText = text;
};
for (const type of ["chrome", "node", "electron"]) {
replaceText(`${type}-version`, process.versions[type]);
}
});
/vite.config.js
import { fileURLToPath, URL } from 'node:url'
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
base: path.resolve(__dirname, './dist/'),
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})