ChatGPT解决这个技术问题 Extra ChatGPT

How to change port number in vue-cli project

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

On macOS, please remember about this stackoverflow.com/a/46813423/13762066

N
Nick Litwin

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/


You saved me precious time, as the first -- is not written in the doc: cli.vuejs.org/guide/cli-service.html#using-the-binary. I was typing npm run serve --port 3000 which seems logical to me, but I got errors... Thumbs up!
That's because the first -- escapes the parameters given to npm run serve and not to vue-cli-service. If you edit package.json and the serve command directly, you enter it as shown in the documentation: "serve": "vue-cli-service serve --port 3000",
While this answer is good and has most up-votes (mine too ;)), I prefer package.json change in order not to have to give port to command every time but have it persistent and automatic in npm run serve command.
w
wwerner

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


Looks like this changed a tad in latest vue cli (using 3.4.1), here's my "serve" line in package.json: "serve": "vue-cli-service serve --port 4000",. Works great!
@RoccoB Thanks, I verified it and added it to the answer.
The answers above don't seem to work in v3 at this date. I tried the .env option, package.json, vue.config.js, and CLI command option but they all get ignored. The config file docs say "Some values like host, port and https may be overwritten by command line flags." cli.vuejs.org/config/#devserver Am I missing something? Anybody else having issues?
@Ryan - This was reported yesterday in the VueJS CLI Repository Issues: github.com/vuejs/vue-cli/issues/4452 It is saying to install portfinder (github.com/http-party/node-portfinder) as there was a breaking change which happened with that.
T
TomyJaya

As the time of this answer's writing (May 5th 2018), vue-cli has its configuration hosted at <your_project_root>/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.


@srf: Answer edited. Thanks for pointing out the broken link.
Must've been a \. effect on that site :)
s
samayo

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


In the latest vuejs version. The file is no longer used, instead using: /vue.config.js.
The file myApp/config/index.js does not exist!
Vue CLI 3 uses vue.config.js at project root. It has to be created manually IIRC.
there is no vue.config.js there
"scripts": { "serve": "vue-cli-service serve --port 80" },
S
Stephen Rauch

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.


I like this answer as it shows that vue.config.js can be used to just change the port and leave everything else as-is which is what was asked originally.
J
Julien Le Coupanec

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"
},

P
Prasenjit Mahato

First Option:

OPEN package.json and add "--port port-no" in "serve" section.

Just like below, I have done it.

{
  "name": "app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8090",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

Second Option: If You want through command prompt

npm run serve --port 8090


c
colidyre

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"
  },

a
aircraft

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.


E
Ebrahim

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 <app-name>' command basically creates, you can use the following configuration: --port 3000. So the whole configuration of your script would be like this:

...
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...

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


This answer duplicates one on this page from 3 years ago: stackoverflow.com/a/60727863/401467
C
Chris Dickson

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.


r
rlandster

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.


L
Laurel

To change the port (NPM), go to package.json. In scripts write your own script, for example:

"start": "npm run serve --port [PORT YOU WANT]"

After that you can start with npm start

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


Please provide a detailed explanation to your answer, in order for the next user to understand your answer better. Also, provide a basic coverage of the content of your link, in case it stops working in the future.
K
Kai - Kazuya Ito

If you use yarn:

yarn serve --port 3000

D
Dominic

Add the PORT envvariable to your serve script in package.json:

"serve": "PORT=4767 vue-cli-service serve",

T
Terje Solem

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    
         }
}

I almost did the same. My file's name is 'vue.config.js' and is located at the root of the vue project. The demanded port is found on path module.exports.dev.port. Here it is set to 8090. The other key-value-pairs are not necessary (for me). That's for starting with 'npm run serve' on development mode!
m
mohammad

If you want to change the port number temporarily, you can add a –port option to npm run serve command.

npm run serve -- --port 6058


B
Batuhan

open package.json add script named serve, "serve": "Vue-cli-service serve --port 8081" npm run serve you will server run 8081

{
  "name": "app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8081", 
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

v
vargashj

You should be good with this:

"serve": "vue-cli-service serve --port 8081",


M
MRIDUAVA

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 => {}
}

go to node_modules/@vue/cli-service ... ? Doesn't that get overwritten on npm update?
you don't want to make code edits - should be configurable