How should I refer to assets in order to maintain reference in production build in vue 3 composition API

Question

If I use <a href="/src/assets/uitslagen/CHA.pdf">klasse A</a> that works in dev but not in production.

I could add import CHA from '/src/assets/uitslagen/CHA.pdf' in the <script setup> tag but I don't know how to write the anchor link then.

<a :href="CHA">klasse A</a> doesn't work. How should I do this in Vue 3 composition API?

Answer 1

Use the URL import:

https://vitejs.dev/guide/assets#explicit-url-imports

import CHA from '/src/assets/uitslagen/CHA.pdf?url'