Are you storing your Vue assets correctly?
ฝัง
- เผยแพร่เมื่อ 15 พ.ย. 2022
- Are you storing your vue assets correctly? In this video, we take a look at where you should store your assets within a vue 3 application.
-----------------------------------------------------------------------------------------------------
Join my channel to support me to continue doing what I love!
/ @johnkomarnicki
-----------------------------------------------------------------------------------------------------
Repo: github.com/johnkomarnicki/vue...
-----------------------------------------------------------------------------------------------------
Patreon: / johnkomarnicki
Website: johnkomarnicki.com/
Twitter: / john_komarnicki
LinkedIn: / john-komarnicki
-------------------------------------------------------------------------------------------------------
#vue #vue3 - วิทยาศาสตร์และเทคโนโลยี
Want to discuss Vue and other development questions? Join my discord server. It is a community where we can all chat and help one another! discord.gg/zySePaMCDU
Great video, and useful. Thanks for making
best notification ever haha thank you for the video brother
haha, that is awesome! I appreciate that!
You are the best
nice video!
Thanks Anton!
Great video! I'd like to add two more reasons for putting your assets in the "public" directory:
1. Broken links after deploying a new version. Many users have my web app open in a tab in their browsers at any time -- my analytics tell me this. If I deploy images with new hashes in their file names, those users won't be able to access them. They have an old version of the app open, and that code will reference the images with the old hashes. Result: broken images, unless the user realizes that they should refresh the page. This problem goes away if I use regular, non-hashed file names.
2. Performance. Some of my assets are large audio files, like music.mp3. If I release three new versions of my application, it would slow down my users' experience if I forced them to download music.v56ryrg.mp3, music.678fwe4.mp3, and music.hy78e23.mp3. It's better if my code keeps referring to music.mp3 which will be cached in the user's browser and available instantaneously.
Appreciate that!
If a user has the older version let's say opened, I'm not quite sure how that would effect them? They should still be seeing the old site, until they refreshed. At that point they would have the new updated code
@@JohnKomarnicki Thanks for responding! This is the sequence of events that leads to the error:
1. Bob the user opens version 1 of my Vue app in his browser.
2. I build and deploy version 2 of the app.
3. Bob clicks a link in the app that opens a new virtual page. Bob is still in version 1 of the app.
4. The app in Bob's browser requests image.55a4fd.jpg, which is the name this image had in version 1. But that file doesn't exist on the server any more. Instead the server has image.99f02a.jpg, which is the name this file got in version 2.
5. Bob sees a page with a missing image.
This wasn't a problem when my app had relatively few users. But as the user base grew I started getting error reports from the field and I was able to reproduce the error myself.
One way to avoid the error is to keep files from a few versions around on the server. But it quickly gets cumbersome to keep track of all the versions. That's when I stopped attaching hashes to my media files. That solved the problem.
Muito bom !
I have an issue with my app similar to this, the problem is NOT with the paths that I am getting from json/api, the paths are correct but the problem is when I run the build command, the images (in the assets folder) have not been compiled to dist folder, only when I import them one by one manually (which is not practical), imagine having a 20 images and for each one of them there are a three copy for each screen size, then I have to write 60 import statement, which is hilarious.
The person whom I asked and referred to your video said that if I get the images this way
const images = pathsArray.map(path => new URL(path, import.meta.url).href);
then I won't need to import them manually, and this line will guarantee they will be compiled, which it didn't.
require() //is not defined error
It works only with Vue.js 3 ?
Vue 3 is now powered with Vite, which changes how things were handled in Vue 2
are you sure there should be minecraft videos on your vue.js playlist?
Lol, that’s bizarre. I removed those 😂
@@JohnKomarnicki some uncontrolled click events must have happened:) anyway, thanks for clarifying the assets/public thing!
Dammm That's suck for Vue 3. What do I have to put a lot of affort on this?