What is the best way to handle subfolders?

I have a question about serving different directories in my dist folder using vercel/serve. Click here to learn more

How can I set it up so that localhost/foo will serve the build from the foo directory, and localhost/bar will serve the build from the bar directory? These subfolders are builds for Vue (2).

https://i.stack.imgur.com/4vu0W.png

Currently, I am able to serve the foo folder using serve -s dist/foo. But is there a way to serve all subfolders with just one command like serve -s dist?

When setting it up this way, it shows the file system like this:

https://i.stack.imgur.com/ZFAia.png

vue.jsserve

Answer №1

Affirmative,
Simply execute the command serve dist or serve -s dist
ALTERNATIVELY
launch the terminal within the dist directory and run serve

This will automatically serve all subfolders.

Then navigate to http://localhost:3000/foo/, ensuring a trailing slash at the end /
Otherwise, it won't display index.html but just list the directory contents.

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

My experience with the Vue.js program has been disappointing as it is failing

Below is an example of my Vue.js code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport&quo ...

vue.jsvuejs2

Attempting to link the input field with a data value on a Vue page

I'm currently facing an issue with my table and binding the input element to the "project_settings" object. The goal is to have the values inside the project_settings object change based on whether the checkbox is checked or not. However, every time I ...

vue.js

Encountered error code 422 Unprocessable_entity upon submitting form to Rails API via Vue.js application

Currently, I am in the process of developing an application using Rails 6 Api as a backend and Vue as a standalone web app. After successfully setting up my sign-up form, I encountered a frustrating issue upon submission where I received a Completed 422 U ...

ruby-on-railsvue.js

How can Vue.js update the displayed information when the selection option changes?

Ensuring the total weight of the products remains accurate when changing the unit of measurement is essential. Currently, although the data in the array is being updated, these changes are only reflected on the screen after clicking on other input fields. ...

vue.jsvuejs2

Is it possible to utilize the output of a function to determine the styling of a div element in Vue?

Hi, I'm trying to use the v-bind:style in my div to apply the textposit function with the textpos prop as a parameter. The function should adjust the style of the div based on the value of the parameter. <div class="container" :style=&qu ...

javascriptcssvue.jsvuex

Nativescript-vue Not Providing Real-Time Updates

Previously, I would run the command: tns run android --bundle, and any changes I made would automatically reflect in both physical and virtual Android emulators. However, now when I save my changes, nothing happens, and I have to rerun the command to see ...

vue.jsnativescriptnativescript-vue

Tips for eliminating the ripple effect when clicking on a q-list item

I have managed to create a sleek sidebar with a curved edge that seamlessly integrates into the body of the page. However, I am struggling to remove the semi-transparent ripple effect that appears when clicking on a list item. The current effect clashes ...

cssvue.jsquasar-frameworkquasar

Display an input field in VueJS with a default value set

Dealing with a form containing various editable fields, I devised a solution. By incorporating a button, clicking it would conceal the label and button itself, while revealing a text box alongside a save button. The challenge lays in pre-filling the textbo ...

javascriptvue.js

The Vue transition displays properly for the "enter" state, but encounters issues with the "leave" state

Recently, I encountered an issue with a modal that is displayed on top of a semi-transparent backdrop. The appearance of both elements is controlled by the same variable using v-if. While the entry transition animation works perfectly fine, the exit trans ...

vue.jsvue-transitions

I need help figuring out how to represent a nested array within an array of objects within my data instance in Vue

Currently, I have a loop that is showcasing a list of items along with their respective sub-items. The data response payload for this operation appears like the following. I have successfully executed the loop and managed to display it on my frontend desi ...

javascriptarraysvue.jsnuxt.js

Having trouble executing 'vue ui' in npm with nodejs vue/cli

Trying to set up Vue tool chain on a fresh Win10pro system has been quite challenging, as I kept encountering various errors that seem to stem from the same source. Upon running vue ui, the following error message pops up: @vue/cli 4.5.15 PS C:\U ...

node.jsvue.jsnpm

Tips for transforming a JSON response into an array with JavaScript

I received a JSON response from an API: [ { "obj_Id": 66, "obj_Nombre": "mnu_mantenimiento_de_unidades", "obj_Descripcion": "Menu de acceso a Mantenimiento de Unidades" }, { "obj_Id": 67, "ob ...

javascriptjsonvue.js

Updating Vue component with mismatched props

I am looking to optimize the Vue component where data is received in varying structures. Take for example Appointment.vue component: <template> <div> <div v-if="config.data.user.user_id"> {{ config.data.user.user_id ...

javascriptvue.jsvuejs2componentsrefactoring

What is the best way to create a button with an on-click method that navigates to a different component?

Currently, I have two separate sign up components with forms - one for individuals and one for businesses. My main page component features two prominent buttons: "Click here to sign up as an individual" and "Click here to sign up as a business." I am tryin ...

vue.jsvuetify.js

Purge the Nuxt store along with all its submodules upon logging out

I am pondering the most effective way to reset my entire store whenever a user logs out. In my app, there are situations where I switch accounts in dev mode, similar to what can happen in live mode. However, I encounter issues when logging in with a differ ...

vue.jsvuexnuxt.js

Exploring the functionality of publicRuntimeConfig in Nuxt plugins

I have developed a new Vue socket.io plugin called @/plugins/socket-io.js import Vue from 'vue' import VueSocketIO from 'vue-socket.io' Vue.use( new VueSocketIO({ debug: true, connection: process.env.SOCKET_IO_CONNECTION, } ...

vue.jsnuxt.js

Displaying images on the Vue front end using data fetched from an API in real-time

I am having difficulty displaying an image dynamically based on the path provided by an api call. While all other data is showing up correctly, the image is not. I have a suspicion that I might be entering the incorrect path. The frontend resides in a dire ...

vue.jsstrapi

Activate a tooltip in Vuetify

I'm utilizing vuetify and have implemented a tooltip feature on a button. However, I do not want the tooltip to be displayed on hover or click; instead, I would like it to appear when a specific event is triggered. translate.vue <v-tooltip v-model ...

javascriptvue.jsvuetify.js

What is the method for incorporating backdrop, escape, and header close triggers in a Bootstrap-Vue modal?

Currently, I am utilizing the bootstrap-vue modal in my project. I now have a requirement to implement validation when a user attempts to close the modal. Specifically, I need to display a confirmation message asking, "Are you sure you want to close withou ...

vue.jsbootstrap-vue

I'm looking for a method to dynamically update my component without the need to refresh the entire page. Can

I created a Vue component that constructs the card and within it, I have another component to which I pass data using a prop. Currently, I am using Swal as a popup to add a new project to the database. However, after adding the project, I have to manually ...

laravelvue.jsvuejs2