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

What is the process for showcasing specific data using Vue.js?

{ "status": "ok", "source": "n", "sortBy": "top", "articles": [ { "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { ...

javascriptphphtmlvue.jsvue-component

extract data from text node using selenium

Currently, I am working on a web application and testing it with Selenium. Within my code, there is a specific node that I am trying to extract data from. <span>Profile Run <span class="current">23</span> of 29</span> My main obje ...

javascriptseleniumxpathbrowser-automation

The eccentricities of Angular Translate in Firefox and Safari

While everything functions correctly in Chrome, there seems to be an issue with changing the language in Safari and Firefox. angular.module('angularApp') .config(['$translateProvider', function ($translateProvider) { $translateProv ...

javascriptangularjsfirefoxsafariangular-translate

Optimal approach for integrating enum with Angular, Mongoose, and Node.js

When it comes to fetching values from MongoDB and displaying them with AngularJS, the process can be straightforward with Jade but becomes more complex with Angular. Here is how the data flows: An array of items is retrieved from MongoDB, each containin ...

javascriptnode.jsangularjsmongodbenums

Switching the website address after picking an option from the drop-down menu

I have an HTML form that includes two dropdown menus. The first dropdown is populated from a database using PHP, and the second dropdown is linked to the first one and uses AJAX to update its values based on the selection from the first dropdown. My goal ...

javascriptphpjqueryhtmlajax

Get the outcome achieved while utilizing the oracledb npm module

Utilizing the oracledb npm package for connecting to the database in a node.js backend API, I am successfully retrieving results using console.log(result.rows). Here is the function code: getDbConnection: function(query) { var connectInfo = [EnvCon ...

node.jsnpmoracle11gnode-oracledb

Using jQuery to locate a JavaScript variable is a common practice in web development

I recently created a JSFiddle with buttons. As part of my journey to learn jQuery, I have been converting old JavaScript fiddles into jQuery implementations. However, I seem to be facing a challenge when it comes to converting the way JavaScript fetches an ...

javascriptjqueryhtmlcssvariables

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...

javascriptjquerycss

Activate on click using JavaScript

When a link with the class .active is clicked, I want to use a JavaScript function to deactivate any other active links. The structure of the code should be as follows: <ul class="product"> <li><a href="#myanmar" class="active">Mya ...

javascriptjqueryhtmlcssonclick

Issue: In Vuetify, the child component 'v-tabs' is displaying an offsetWidth value of 0

To showcase the issue, I have created a codepen: https://codepen.io/anon/pen/vzqgJB Within the Vuetify v-app, there is a router-view. <div id="app"> <v-app> <v-content> <v-container> {{$route.path}} &l ...

vue.jsvuejs2vue-routervuetify.js

An issue arises in the NodeJS Express authentication process when attempting to set headers after they have already been sent,

Currently, I am working on developing a basic authentication system using the POST method. app.post("/api/auth",function(req,resp) { var username = req.body.username||req.param('username'); var password = req.body.password||req.param(&a ...

javascriptmysqlnode.jsauthenticationexpress

Experience the impact of a lagging network connection on Chrome extensions through the power of React-NextJS

I'm currently working on a Chrome extension that requires me to limit download speeds in the browser programmatically (client-side). Despite researching extensively on the subject, I have not been able to find any information on how to achieve this us ...

javascriptreactjsnext.jsgoogle-developer-tools

How can I retrieve all links using XPath in Puppeteer when there are issues with pausing or functionality?

I am having issues with using XPaths to select all links on a page in my Puppeteer app. Sometimes the method I am using gets stuck and causes my crawler to pause. I'm wondering if there is a better way to retrieve all links from an XPath or if there m ...

javascriptnode.jsxpathgoogle-chrome-devtoolspuppeteer

What steps can I take to pinpoint the exact error location when running assetic:dump in Symfony2?

This error message indicates an issue with assetic:dump in Symfony2. [Assetic\Exception\FilterException] ...

javascriptjquerysymfonyyuiassetic

The functionality of fetching website titles using Ajax/jQuery is experiencing some limitations

Below is a code snippet for a simple website title getter: $( document ).ready(function() { $("#title").click(function() { var SubURL = $("#input").val(); $.ajax({ url: "http://textance.herokuapp.com/title/"+SubURL+"/", complete: function(da ...

javascriptjqueryhtmlajaxheroku

nextAuth.js is failing to access the accessToken, returning only the values {iat, exp, jti} instead

Here is the code I am working with: import NextAuth from "next-auth" import CredentialsProvider from "next-auth/providers/credentials" export default NextAuth({ sectret:process.env.NEXTAUTH_SECRET, session: { strategy: "jw ...

javascriptnext.jsnext-auth

Tips for retrieving next-auth authOptions from an asynchronous function

I need to retrieve values from AWS Secrets Manager and integrate them into the authOptions configuration for next-auth. The code implementation I have is as follows: export const buildAuthOptions = async () => { const secrets: AuthSecrets = await getS ...

javascripttypescriptnext.jsnext.js13next-auth

Issue with socket malfunctioning when integrated with express

I’m encountering an issue with the socket in my program. While I can easily broadcast from any part of the program using "io" connection, I face limitations when trying to use "socket" for broadcasting unless it is within the same connection as "io." I a ...

javascriptnode.jsexpresssocket.iorouter

To link circles vertically with a line and fill them with color when clicked, follow these steps:

I am looking to create a design similar to the image below using unordered list items. When a user clicks on a list item, I want the circle to fill with color. I have structured it by creating a div with nested list items and span elements. If a user click ...

javascriptjqueryhtmlcss

The Distinction Between "Q" and "q" in AngularJS and RequireJS

Currently, my project involves developing a single page application using AngularJS, Breeze, and RequireJS. While trying to configure AMD with requirejs to integrate Angular and Breeze, I ran into an issue related to Breeze's dependency on "q". Intere ...

javascriptangularjsrequirejsbreezeq