After running npm run serve it gives an address like http://localhost:8080 and it works, this address is targeted the root folder of local server but my project exists another folder like http://localhost/vue

And my question is how the address http://localhost:8080 works and where is the actual index.html? Since my actual project placed in localhost/vue folder! and the address should be http://localhost/vue

After running npm run serve it gives an address like http://localhost:8080 and it works, this address is targeted the root folder of local server but my project exists another folder like http://localhost/vue

And my question is how the address http://localhost:8080 works and where is the actual index.html? Since my actual project placed in localhost/vue folder! and the address should be http://localhost/vue

• javascript
• node.js
• vue.js
• vuejs2

2 Answers 2

I think you are a bit confused on what is going on in the background when you use serve.

When you are running the mand npm run serve, your project is getting built by Webpack and then "served" via a local http-server. This server is using your project's build folder as it's root.

It seems like you have created a folder named localhost as out of your ments here. http://localhost is not a folder called "localhost" in your puter. In fact, it is just a name for your internal ip: 127.0.0.1. You can test this by going to 127.0.0.1:8080 and seeing this is the same as http://localhost:8080

in programmatic terms, one could say the following: localhost == 127.0.0.1

That out of the way, you seemt to also expect there to be a sub-folder named vue, since that's what you have in your localhost folder. Knowing the above; http://localhost is not a folder localhost on your pc. It is however the folder the http-server has chosen, in this case, vue chooses the folder /dist inside your project folder.

Example: Your project folder has the following path: C:\Users\Admin\Documents\myProject

When you then run npm run serve in that folder, the vue http-server will serve (host) the folder C:\Users\Admin\Documents\myProject\dist

This means http://localhost == C:\Users\Admin\Documents\myProject\dist\index.html

However, if your goal here is to have your project served as: http://localhost/my-custom-sub-folder

You will have to edit the vue.config.js for your vue project by adding: publicPath

vue.config.js example:

module.exports = {
  publicPath: '/my-custom-sub-folder',
};

the index.html file should be by default placed at the root of your project in the "public" folder