No files found in dist/ directory when using Vue.js

Beginner's Note

I must confess that I am a novice when it comes to web development.

Please bear with me if this question seems silly; I appreciate your assistance in advance.

Initial Setup

My current node version is 16.15.1 and npm version is 9.5.0. To kickstart my project, I used the command $ npm create vite@latest. Upon setup, I opted for Vue and Javascript. Aside from a minor issue where npm gave a warning about "

deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4a7bba1a6b7b1b9b5a4f9b7bbb0b1b794e5fae0faec">[email protected]</a>: Please use @jridgewell/sourcemap-codec instead
", everything else proceeded smoothly.

Once inside the project directory, I executed $ npm install followed by $ npm run build. No issues or warnings were raised during these processes.

The Issue

Subsequently, when I accessed dist/index.html, all I found was an empty page. Although npm run dev appears functional, I cannot locate the finalized website anywhere.

Despite multiple attempts, the outcome remains unchanged. What could be the root of the problem?

I deeply appreciate anyone who takes the time to respond to my query.

Edit: I aim to generate static HTML suitable for platforms like Github Pages.

javascriptvue.jsnpmvite

Answer №1

In order to view the build, it is essential to have a web server set up as you cannot simply open dist/index.html directly in a browser.

To access your build, you can execute npx serve dist from the main directory of your project.

I trust this information proves useful to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with displaying the NVD3 sample chart

I seem to be missing something simple... I've copied the code for an nvd3 example exactly, but I'm getting a blank page without any error messages. Both the nvd3 and d3 libraries are showing up when I check in the console by typing "nv" or "d3", ...

javascripthtmld3.jsnvd3.js

"Exploring the best way to retrieve the angular filter value within a Node.js environment

Currently, I am facing an issue with accessing the value in Node.js using req.body when it is stored in ng-model. The ng-model includes an AngularJS filter, and I need to retrieve this filtered value from the input field in Node.js through req.body. Below ...

javascriptangularjsnode.js

Unable to retrieve data on the frontend using Node.js and React

I have been attempting to retrieve all user data from the backend to display on the webpage. However, it seems that the getAllUsers() function is not returning a response, as no console logs are being displayed. Here is my ViewUsers.js file: import React, ...

javascriptnode.jsreactjsaxios

Is it possible to obtain a return value from Electron's webContents.executeJavaScript when NodeIntegration is disabled?

Is there a way to retrieve a return value without using NodeIntegration in Electron, similar to ipcRenderer when it's enabled? ...

javascriptnode.jsecmascript-6electron

Issue: Unable to locate module - Error in integration of Vue.js with Laravel framework

I'm currently following a tutorial on YouTube for setting up Vue and Laravel. My resources folder structure looks like this so far: - resources - js - app.js - vue -app.vue In my app.js file: require('./bootstrap&ap ...

javascriptlaravelvue.js

How can I delete the black background from the ion-tab-bar in Ionic 7?

In my current project using Ionic 7, I have a navigation guide set up with 4 tabs. I am trying to customize the styling of these ion tabs by adding some custom CSS. The issue I'm facing is that despite my attempts to make the background transparent, ...

javascriptcssangularionic-framework

Convert a function into another function when the button is clicked

Hey there, I have an array containing years in my controller: public function getNextYear() { $years = $this->getYears(); foreach ($years as $key => $value) { $y[] = $value + 1; } return $y; } I am displaying this on my ind ...

javascriptphpyii2

What is the best way to retrieve a response from a modal dialog using jQuery?

Is there a way to utilize an add-in such as simple-modal or the dialog add-in in the UI kit to achieve AJAX interaction with the server? I am looking for a solution that allows the modal to communicate with the server and return the result back to the ca ...

javascriptjqueryajaxjquery-uisimplemodal

Incorrect sequencing in Chart.js chart with time displayed on the horizontal axis

Hey there, I'm currently working on displaying some data using chart.js in angularjs. However, I seem to be facing an issue with the ordering of my data which is resulting in a strange looking chart like this: https://i.stack.imgur.com/F6phH.png Her ...

javascriptangularjs

Sending data from JavaScript to PHP in the same function

Currently, I am encountering an issue related to passing JavaScript variables to PHP within the same function. Here is a snippet of my code: else if(msg_type[i] == 'code' ){ var code_action = 'test'; <?php function foob ...

javascriptphpvariables

Hide Navbar when clicking on menu item

I'm struggling with finding a solution to this issue, as I am unsure of how to proceed. The problem I am facing is that when I click on an item, the router-view changes correctly, but the menu remains open. I would like it to close after a click. ...

javascriptvue.js

Guide to resolving the error "Type 'void' cannot be assigned to type 'Function' in VueJS"

I've created a Vue component that requires a function pointer to execute a delete action. <template> <q-card class="my-card" > <q-img :src="media.normal || media.original"> <div class="absolute ...

typescriptvue.jsvuejs3

Include an HTML attribute within a given string

Using jQuery, I am adding HTML content to a div. The variables rowString and inputString have been defined beforehand: $("#filterContainer").append( rowString + `<label class='filterLabel' for=${filter}>${filter}< ...

javascriptjqueryhtml

I'm perplexed by the inner workings of infinite ajax scroll in fetching additional posts

As someone who is new to JavaScript, I find it challenging to grasp the concept, especially when incorporating it with HTML. Despite this, I decided to experiment with infinite ajax scroll functionality. Below is my code snippet: var ias = jQuery.ias({ ...

javascriptjqueryhtmlajax

"The file upload function is populating the req.body object, but not the req.file

I successfully implemented a file upload API using multer and express, which functions well when accessed through POSTMAN. However, I encountered an issue when trying to utilize the same API with another file upload API: The code I used can be found below ...

javascriptnode.jsexpressmulter

Automatically increase the dates in two cells once they have passed

Summary: Although I'm not a programmer, I've managed to incorporate some complex coding into a Google Sheets document for tracking my team's projects. This includes multiple-variable dropdown menus and integration with Google Calendar to mo ...

javascriptgoogle-sheetsgoogle-calendar-api

The controller is not receiving the isolated scope value

I have implemented angular-slider.js on a webpage where a server request is triggered upon changing the slider's value. I am looking to delay this action until the user releases the mouse button, specifically during onmouseup event. Incorporating thi ...

javascriptangularjs

Automatically update button appearance upon reaching zero value using JavaScript

Whenever I click the button, the user's HP decreases until it reaches 0 and then the button changes. However, a peculiar issue arises when the userHealth hits zero - the button does not change immediately. An additional click is required for the butto ...

javascriptjquery

Missing ng-required fields not displaying the has-error validation in AngularJS forms

While editing any part of their address, the user should see a red invalid border around each field to indicate that the full form is required. However, for some reason I can't seem to get the 'Address' field to display this border. The set ...

javascriptcssangularjshtmltwitter-bootstrap

Tips for using jQuery to add several image source URLs to an array

My JavaScript code uses jQuery to collect all image sources on document load and store them in an array: var sliderImg = []; sliderImg.push($('.thumbnail').children('img').attr('src')); Then, I have a click event set up to a ...

javascriptjqueryarrays