CODEWITHSUNDEEP
javascripthtmlnode.jsvue.jsnuxt.js
why
why

Reputation: 59

Assets path mismatch in Nuxt3 static generation

I develop my website using Nuxt3 and deploy it following the instructions here: https://v3.nuxtjs.org/getting-started/deployment#static-hosting

I successfully get dist and node server hosted web (running npx serve -o dist) also works well, But directly opening index.html in brower leads to a webpage rendered without any CSS and images.

I checked the generated html and found the assets path is like:

<link rel="modulepreload" href="/_nuxt/entry-1f8b74a8.mjs" as="script" crossorigin>

while my dist folder looks like:

dist
├── _nuxt
│   ├── entry-1f8b74a8.mjs
│   ├── entry.ff9830ad.css
│   ├── index-a3c0d3be.mjs
│   ├── index-e5b9c659.mjs
│   ├── index.072137e3.css
│   ├── lcdp-c28417d3.mjs
│   ├── manifest.json
│   ├── paper-b4b64fe8.mjs
│   └── paper.6897f003.css
├── imgs
│   ├── bg1.png
│   ├── bg2.png
│   └── other images...
└── index.html

I guess maybe the reason is that the assets path is wrong? What is the correct way to do the static website generation using nuxt3?

Upvotes: 0

Views: 636

Answers (1)

kissu
kissu

Reputation: 46602

OP achieved to properly deploy the app on Vercel, it's better than Github Pages on every way anyway.

Upvotes: 1

Related Questions