Vue.js更改調(diào)試地址端口號(hào)的實(shí)例

Vue項(xiàng)目一般使用自帶的腳手架工具vue-cli和webpack打包方式進(jìn)行項(xiàng)目構(gòu)建運(yùn)行。開發(fā)中，我們?cè)诳刂婆_(tái)輸入命令行npm run dev部署項(xiàng)目后，默認(rèn)開啟的頁面調(diào)試地址是8080端口。但是有時(shí)候我們?cè)谶M(jìn)行多個(gè)項(xiàng)目開發(fā)需要同時(shí)部署多個(gè)vue項(xiàng)目，甚至有的還需要啟動(dòng)后臺(tái)項(xiàng)目，這時(shí)就需要修改Vue項(xiàng)目的啟動(dòng)端口（不然會(huì)報(bào)端口被占用的錯(cuò)誤，一個(gè)端口號(hào)只能一個(gè)進(jìn)程占用）。

本文像大家講解如何找到Vue項(xiàng)目中端口的配置文件，并修改。

首先，我們打開項(xiàng)目根路徑中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節(jié)點(diǎn)配置的是項(xiàng)目部署編譯的入口文件，一般默認(rèn)是build/dev-server.js，找到build目錄下的該文件中下面代碼：

var uri = 'http://localhost:' + port

uri就是我們項(xiàng)目部署的地址名稱，port即是端口號(hào)，我們?cè)谶@里把port改成新的端口號(hào)也可以。在實(shí)際開發(fā)中，不建議這樣在代碼中采用硬編碼，而是通過統(tǒng)一的配置文件進(jìn)行定義。

那么配置文件在哪呢，我們繼續(xù)看dev-server.js文件中如下代碼：

var webpackConfig = require('./webpack.dev.conf')

從這里可以看出，引入了一個(gè)新的文件webpack.dev.conf，繼續(xù)點(diǎn)開后發(fā)現(xiàn)該本身并不負(fù)責(zé)具體字段的設(shè)置工作，只是引入其他的配置文件以便于統(tǒng)一管理，我們找到如下代碼：

var config = require('../config')

注意這里的config是指文件件，我們打開其目錄下的index.js,就是端口號(hào)的最終設(shè)置的地方：

 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，重新部署項(xiàng)目，端口號(hào)修改成功。

以上這篇Vue.js更改調(diào)試地址端口號(hào)的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。