CODEWITHSUNDEEP
javascriptnode.jsvue.jsvuejs2
Anisur Rahman
Anisur Rahman

Reputation: 660

How vue.js cli command "npm run serve" work

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

Upvotes: 5

Views: 15680

Answers (2)

Sølve
Sølve

Reputation: 4406

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

When you are running the command 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 comments here. http://localhost is not a folder called "localhost" in your computer. 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',
};

Upvotes: 5

Heroe__
Heroe__

Reputation: 274

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

Upvotes: 0

Related Questions