Nuxt3 Generate - static assets relative path
Hello guys, when using npm run generate, how to set a relative path to _nuxt folder assets? i want to serve it via electron, inside the src folder...
3 Replies
Hi @thergbcrow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To set a relative path to the
_nuxt folder assets when using nuxt generate for an Electron app, you need to configure the app.baseURL in your nuxt.config.ts file.
For Electron applications, you typically want to use a relative path (starting with ./) rather than an absolute path (starting with /). This is because Electron loads files from the filesystem rather than a web server.
Here's how to configure it:
This configuration tells Nuxt to use relative paths for all assets, which is necessary for Electron to properly load resources from the local filesystem.
If you're experiencing issues with navigation in your Electron app after using nuxt generate, this is a common problem. As seen in several Stack Overflow posts, Electron apps built with Nuxt 3 can encounter issues with the router when using file:// protocol.
Some users have reported that downgrading from Nuxt 3.8 to 3.7 can help resolve these issues if you're experiencing a white screen on startup Stack Overflow Post.
Also, make sure you don't have any environment variables overriding your configuration. As one user discovered, having NUXT_APP_BASE_URL= in their .env file was overriding their baseURL setting in the config Github Issue.
If you're still having issues, you might need to check your Electron configuration to ensure it's properly loading the generated files from the correct location.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@417768885803024385> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
import { app, BrowserWindow } from 'electron'
import express, { static as serveStatic } from 'express'
import * as path from "node:path";
import { fileURLToPath } from 'url';
import 'dotenv/config'
import titleBar from "./modules/title-bar.js";
const filename = fileURLToPath(import.meta.url);
const public = path.join(path.dirname(filename), '../.output/public')
const createWindow = () => {
return new BrowserWindow({
width: 1440,
height: 1024,
minWidth: 1024,
minHeight: 676,
backgroundColor: '#000',
webPreferences: {
webSecurity: false,
nodeIntegration: true,
contextIsolation: false,
},
titleBarStyle: 'hiddenInset',
})
}
const startServer = (window) => {
if(process.env.NODE_ENV !== 'dev') {
const server = express()
server.use('/', serveStatic(public))
const listener = server.listen(8079, 'localhost', () => {
const port = (listener.address()).port
window.loadURL(
http://localhost:${port})
console.log([+] Serving from http://localhost:${port})
})
}
window.loadURL(http://localhost:3000)
console.log([+] Serving from http://localhost:3000})
}
app.on('ready', () => {
const browserWindow = createWindow()
startServer(browserWindow)
titleBar(browserWindow)
})
SOLVED