I created a new Vue3 project using vue create <project-name> and Vite (v4.3.1). I had no issues using npm run dev to edit and work on my project. However, when I used npm run build, it failed to correctly compile my project. By this, I mean that the build command was successful. It built in 1.38s which I think is a little too fast, but there are a lot missing files.
I believe that the build did not include any of my photos or files that were in the assets folder. I uploaded the newly zipped /dist folder to my server where I have my portfolio and replaced it. It loaded the main page, but the photos are not appearing and the buttons that are supposed to take me to other pages of my app give out errors. The src/components is there since the components I used in the main page are present, but nothing from the src/assets folder is there other than the base.css and main.css files that were already there when I created the project. I should note that the .css file it created only contains the css I wrote in App.vue and what was in main.css and base.css.
I tried opening the index.html file from the /dist folder and it displays a blank white screen. I searched online for answers, but the only thing that was remotely close to my problem was a youtube video. They fixed their problem in Vue.config.js, but I don't have that file. I have vite.config.js instead. I also noticed that whenever other people would build their projects, they would recieve multiple .css and .js files as well as a location for their assets. I only received my index.html, 1 .js file, and 1 .css file.
My apologies. I read it in the documentation, but didn't understand it. You cannot simply use an <a href=""> tag to link html files together. You have to use either Pages or Vue Router. I used Vue Router and fixed my files. They now displayed correctly when I used 'serve -s dist' in the terminal for a preview and on my personal website. There is a great video on Vue Router here.
