How to change port number in vue-cli project

Question

How to change Port number in Vue-cli project so that it run s on another port instead of 8080

User · Answer

Go to node modules  vue cli-service lib options js  At the bottom inside the  devServer  unblock the codes  Now give your desired port number in the  port      devServer       open  process platform      darwin      host   0 0 0 0      port  3000      default port 8080    https  false     hotOnly  false     proxy  null     string   Object    before  app   gt

User · Answer

First Option  OPEN package json and add  quot --port port-no quot  in  quot serve quot  section  Just like below  I have done it       quot name quot    quot app-name quot      quot version quot    quot 0 1 0 quot      quot private quot   true     quot scripts quot          quot serve quot    quot vue-cli-service serve --port 8090 quot        quot build quot    quot vue-cli-service build quot        quot lint quot    quot vue-cli-service lint quot     Second Option  If You want through command prompt npm run serve --port 8090

User · Answer

Best way is to update the serve script command in your package json file  Just append --port 3000 like so    scripts        serve    vue-cli-service serve --port 3000      build    vue-cli-service build      inspect    vue-cli-service inspect      lint    vue-cli-service lint

User · Answer

If you want to change the localhost port  you can change scripts tag in package json     scripts          serve    vue-cli-service serve --port 3000        build    vue-cli-service build        lint    vue-cli-service lint

User · Answer

There are a lot of answers here varying by version  so I thought I d confirm and expound upon Julien Le Coupanec s answer above from October 2018 when using the Vue CLI  In the most recent version of Vue js as of this post - vue 2 6 10 - the outlined steps below made the most sense to me after looking through some of the myriad answers in this post  The Vue js documentation references pieces of this puzzle  but isn t quite as explicit    Open the package json file in the root directory of the Vue js project  Search for  port  in the package json file  Upon finding the following reference to  port   edit the serve script element to reflect the desired port  using the same syntax as shown below    scripts        serve    vue-cli-service serve --port 8000      build    vue-cli-service build      lint    vue-cli-service lint     Make sure to re-start the npm server to avoid unnecessary insanity    The documentation shows that one can effectively get the same result by adding --port 8080 to the end of the npm run serve command like so  npm run serve --port 8080  I preferred editing the package json directly to avoid extra typing  but editing npm run serve --port 1234 inline may come in handy for some

User · Answer

Oh my God  It is not that much complicated  with these answers which also works  However  other answers tho this question also works well  If you really want to use the vue-cli-service and if you want to have the port setting in your package json file  which your  vue create  lt app-name gt   command basically creates  you can use the following configuration  --port 3000  So the whole configuration of your script would be like this       quot scripts quot      quot serve quot    quot vue-cli-service serve --port 3000 quot    quot build quot    quot vue-cli-service build quot    quot lint quot    quot vue-cli-service lint quot          I am using  vue cli 4 3 1  vue --version  on a macOS device  I have also added the vue-cli-service reference  https   cli vuejs org guide cli-service html

User · Answer

In my vue project in visual studio code  I had to set this in  config index js   Change it in the    module exports         dev                 Paths           assetsSubDirectory   static             assetsPublicPath                 proxyTable                 host   localhost      can be overwritten by process env HOST           port  8090     can be overwritten by process env PORT  if port is in use  a free one will be determined           autoOpenBrowser  false            errorOverlay  true            notifyOnErrors  true            poll  false

User · Answer

As the time of this answer s writing  May 5th 2018   vue-cli has its configuration hosted at  lt your project root gt  vue config js  To change the port  see below       vue config js module exports                devServer        open  process platform      darwin       host   0 0 0 0       port  8080     CHANGE YOUR PORT HERE      https  false      hotOnly  false                    Full vue config js reference can be found here  https   cli vuejs org config  global-cli-config  Note that as stated in the docs     All options for webpack-dev-server     https   webpack js org configuration dev-server   is available within the devServer section

User · Answer

The port for the Vue-cli webpack template is found in your app root s myApp config index js    All you have to do is modify the port value inside the dev block    dev        proxyTable          env  require    dev env        port  4545      assetsSubDirectory   static       assetsPublicPath           cssSourceMap  false       Now you can access your app with localhost 4545   also if you have  env file better to set it from there

User · Answer

Late to the party  but I think it s helpful to consolidate all these answers into one outlining all options   Separated in Vue CLI v2  webpack template  and Vue CLI v3  ordered by precedence  high to low    Vue CLI v3   package json  Add port option to serve script  scripts serve vue-cli-service serve --port 4000 CLI Option --port to npm run serve  e g  npm run serve -- --port 3000  Note the --  this makes passes the port option to the npm script instead of to npm itself  Since at least v3 4 1  it should be e g  vue-cli-service serve --port 3000  Environment Variable  PORT  e g  PORT 3000 npm run serve  env Files  more specific envs override less specific ones  e g  PORT 3242 vue config js  devServer port  e g  devServer    port  9999     References     https   cli vuejs org config  devserver https   cli vuejs org config  vue-config-js https   cli vuejs org guide mode-and-env html    Vue CLI v2  deprecated    Environment Variable  PORT  e g  PORT 3000 npm run dev  config index js  dev port   References    http   vuejs-templates github io webpack  https   github com vuejs-templates webpack blob develop template build webpack dev conf js L35

User · Answer

Another option if you re using vue cli 3 is to use a config file  Make a vue config js at the same level as your package json and put a config like so   module exports       devServer        port  3000         Configuring it with the script   npm run serve --port 3000   works great but if you have more config options I like doing it in a config file  You can find more info in the docs

User · Answer

In the webpack config js   module exports                devServer        historyApiFallback  true      port  8081       you can change the port there     noInfo  true      overlay  true                   You can change the port in the module exports -  devServer -  port   Then you restrat the npm run dev  You can get that

User · Answer

If you re using vue-cli 3 x  you can simply pass the port to the npm command like so   npm run serve -- --port 3000  Then visit http   localhost 3000

User · Answer

An alternative approach with vue-cli version 3 is to add a  env file in the root project directory  along side package json  with the contents   PORT 3000  Running npm run serve will now indicate the app is running on port 3000

User · Answer

Add the PORT envvariable to your serve script in package json    serve    PORT 4767 vue-cli-service serve

[vue.js] How to change port number in vue-cli project

Examples related to vue.js

Examples related to vuejs2

Examples related to command-line-interface

Examples related to vue-cli