Vue项目一般使用自带的脚手架工具vue-cli和webpack打包方式进行项目构建运行。开发中，我们在控制台输入命令行npm run dev部署项目后，默认开启的页面调试地址是8080端口。但是有时候我们在进行多个项目开发需要同时部署多个vue项目，甚至有的还需要启动后台项目，这时就需要修改Vue项目的启动端口（不然会报端口被占用的错误，一个端口号只能一个进程占用）。

本文像大家讲解如何找到Vue项目中端口的配置文件，并修改。

1 vue-cli2.x

首先，我们打开项目根路径中webpack的配置文件package.json，找到如下代码:

“scripts”: {

“dev”: “node build/dev-server.js”,

“start”: “node build/dev-server.js”,

“build”: “node build/build.js”,

“lint”: “eslint –ext .js,.vue src”

}

start节点配置的是项目部署编译的入口文件，一般默认是build/dev-server.js，找到build目录下的该文件中下面代码：

var uri = ‘http://localhost:’ + port

uri就是我们项目部署的地址名称，port即是端口号，我们在这里把port改成新的端口号也可以。在实际开发中，不建议这样在代码中采用硬编码，而是通过统一的配置文件进行定义。

那么配置文件在哪呢，我们继续看dev-server.js文件中如下代码：

var webpackConfig = require(‘./webpack.dev.conf’)

从这里可以看出，引入了一个新的文件webpack.dev.conf，继续点开后发现该本身并不负责具体字段的设置工作，只是引入其他的配置文件以便于统一管理，我们找到如下代码：

var config = require(‘../config’)

注意这里的config是指文件件，我们打开其目录下的index.js,就是端口号的最终设置的地方：

dev: {

env: require(‘./dev.env’),

port: 8082,

autoOpenBrowser: true,

assetsSubDirectory: ‘static’,

assetsPublicPath: ‘/’,

proxyTable: {},

// CSS Sourcemaps off by default because relative paths are “buggy”

// with this option, according to the CSS-Loader README

// (https://github.com/webpack/css-loader#sourcemaps)

// In our experience, they generally work as expected,

// just be aware of this issue when enabling this option.

cssSourceMap: false

}

将port改成新值即可，如我这里的8082，重新部署项目，端口号修改成功。

2 vue-cli3.x

在vue脚手架3.几版本更改端口号
1.在根目录下创建 vue.config.js 文件

  1. module.exports = {
  2.     devServer: {
  3.         port: 8888,     // 端口
  4.     },
  5.     lintOnSave: false   // 取消 eslint 验证
  6. };

3.端口号占用

突然碰到服务起不来的情况，可以查看一下端口占用情况。
一般会有提示说端口号多少被占用

  1. # 查看端口占用情况命令
  2. $ sudo lsof -i :9000
  3. # 冒号后面就是你需要查看的端口号。
  5. # 得到表头名为PID的一列，这一列就表示占用当前端口的进程。
  6. # 杀掉占用当前端口号的进程
  7. $ sudo kill -9 716
  8. # -9后面加一个空格，然后加上占用端口的进程PID，就可以杀掉占用端口的进程。最后重启就ok。