Giters

slinkity / slinkity

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Home Page:https://slinkity.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Build not linking assets correctly

mrtrimble opened this issue · comments

commented

Describe the bug

Apologies if this is a known thing or if I'm doing something incorrectly, but ran into a problem with Slinkity + Vue.

When running npm run build and launching the _site/index.html file via Live Server, I am seeing the page but it fails to load CSS + JS assets. I checked out the linked assets and found it's pointing to:
/assets/...

instead of:
./assets/...

Manually adding the leading ./ allows the page to display correctly.

To Reproduce

Steps to reproduce the behavior:

  1. Open a terminal and run npm init slinkity
  2. Name the project and select Vue as the component flavor
  3. cd into the project and run npm install
  4. Finally run npm run build to build the project
  5. Open the _site/index.html file in a server (I just used Live Server within VS Code) and it will display un-styled HTML page.

Expected behavior

Expected build to link assets properly automatically

Screenshots

If applicable, add screenshots to help explain your problem.

Running _site/index.html in Live Server directly after building:
chrome_sJqsBbgw1r

Manually adding leading ./ to assets:
chrome_wPWGvmnuvd

Chrome Network tab returning 404s:
chrome_oR6XZJDS3r

(please complete the following information):

  • OS: Tested Windows 11, Mac OS
  • Browser: Chrome
  • Version: Version 98.0.4758.102 (Official Build) (64-bit)

Additional context
No additional context, otherwise experience has been great so far! Good job Slinkity Team!

commented

I used the svelte variant and it works good. So possibly something with Vue adapter.

slinky|⇒ npm run build

> slinky@1.0.0 build
> slinkity

[11ty] Writing .11ty-build-QgEYuK/deployment/index.html from ./src/deployment.md (njk)
[11ty] Writing .11ty-build-QgEYuK/index.html from ./src/index.md (njk)
[11ty] Copied 14 files / Wrote 2 files in 0.05 seconds (v1.0.0)
vite v2.8.6 building for production...
✓ 3 modules transformed.
../_site/deployment/index.html       3.62 KiB
../_site/index.html                  5.71 KiB
../_site/assets/index.6d9e325f.css   2.64 KiB / gzip: 0.85 KiB
slinky|⇒ npx live-server _site
Serving "_site" at http://127.0.0.1:8080
Ready for changes

image

commented

Closing since this is an older issue. Give the 1.0 canary a try at https://slinkity.dev/docs/quick-start with the new Vue renderer! We've bumped to Vite 3.0 which may address this issue internally.