0

Files Screenshot

Files Screenshot 2

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.

Sergio Sanchez-Alvares
  • 1
  • 2
  • Please provide enough code so others can better understand or reproduce the problem. You explained very well your problem, but why no code? – pierpy May 03 '23 at 19:45

2 Answers2

0

I'm strongly sure vite made its work and build the app.

I tried opening the index.html file from the /dist folder

It won't work that way.

You have to host your app by any web server, for example nginx or IIS.

Can you please show your src folder?

AlekseiKrivo
  • 466
  • 6
  • Sure. I have edited the post to include an image of the directory. The only image that appears is the selfie JPG, but I used many more in this app. The selfie JPG is the only image referenced from the index.html. I also followed the instructions on the "previewing locally" section of the vue deployment page. [link](https://cli.vuejs.org/guide/deployment.html#general-guidelines) I tried using serve, but the preview was also blank. – Sergio Sanchez-Alvares May 02 '23 at 15:51
  • Are all images in the "@/src/assets"? Can you please show your component code. – AlekseiKrivo May 02 '23 at 17:34
  • All the images are in "src/assets/Photos." The selfie JPG is also located here. I have added another image to the post to display the components folder. – Sergio Sanchez-Alvares May 02 '23 at 18:37
0

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.

Sergio Sanchez-Alvares
  • 1
  • 2