How to change Port number in Vue-cli project so that it run's on another port instead of 8080.
This question is related to
vue.js
vuejs2
command-line-interface
vue-cli
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).
package.json
: Add port option to serve
script: scripts.serve=vue-cli-service serve --port 4000
--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
.$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:
$PORT
, e.g. PORT=3000 npm run dev
/config/index.js
: dev.port
References:
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"
},
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 - [email protected] - 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.
package.json
file in the root directory of the Vue.js project.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.
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 => {}
}
Add the PORT
envvariable to your serve
script in package.json
:
"serve": "PORT=4767 vue-cli-service serve",
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.
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"
},
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
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
}
}
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.
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.
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
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/
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.
Source: Stackoverflow.com