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，重新部署項目，端口號修改成功。

以上這篇Vue.js更改調試地址端口號的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。