Vue.js更改调试地址端口号

小灰灰 2022-06-10 02:47 165阅读 0赞

--------------------

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

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

首先，我们打开项目根路径中`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`，重新部署项目，端口号修改成功。