Vue.js更改調(diào)試地址端口號(hào)的實(shí)例
Vue項(xiàng)目一般使用自帶的腳手架工具vue-cli和webpack打包方式進(jìn)行項(xiàng)目構(gòu)建運(yùn)行。開(kāi)發(fā)中，我們?cè)诳刂婆_(tái)輸入命令行npm run dev部署項(xiàng)目后，默認(rèn)開(kāi)啟的頁(yè)面調(diào)試地址是8080端口。但是有時(shí)候我們?cè)谶M(jìn)行多個(gè)項(xiàng)目開(kāi)發(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)目中端口的配置文件，并修改。
首先，我們打開(kāi)項(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)目部署的地址名稱(chēng)，port即是端口號(hào)，我們?cè)谶@里把port改成新的端口號(hào)也可以。在實(shí)際開(kāi)發(fā)中，不建議這樣在代碼中采用硬編碼，而是通過(guò)統(tǒng)一的配置文件進(jìn)行定義。
那么配置文件在哪呢，我們繼續(xù)看dev-server.js文件中如下代碼：
var webpackConfig = require('./webpack.dev.conf')
從這里可以看出，引入了一個(gè)新的文件webpack.dev.conf，繼續(xù)點(diǎn)開(kāi)后發(fā)現(xiàn)該本身并不負(fù)責(zé)具體字段的設(shè)置工作，只是引入其他的配置文件以便于統(tǒng)一管理，我們找到如下代碼：
var config = require('../config')
注意這里的config是指文件件，我們打開(kāi)其目錄下的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í)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何處理base64格式文件pdf及圖片預(yù)覽功能
這篇文章主要給大家介紹了關(guān)于vue如何處理base64格式文件pdf及圖片預(yù)覽功能的相關(guān)資料,圖片的base64編碼就是可以將一副圖片數(shù)據(jù)編碼成一串字符串,使用該字符串代替圖像地址,需要的朋友可以參考下2024-05-05
淺談關(guān)于iview表單驗(yàn)證的問(wèn)題
這篇文章主要介紹了淺談關(guān)于iview表單驗(yàn)證的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue 實(shí)現(xiàn)在同一界面實(shí)現(xiàn)組件的動(dòng)態(tài)添加和刪除功能
這篇文章主要介紹了vue 實(shí)現(xiàn)在同一界面實(shí)現(xiàn)組件的動(dòng)態(tài)添加和刪除,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
vue2前端使用axios發(fā)起post請(qǐng)求后端(springboot)接收不到值解決辦法
這篇文章主要介紹了vue2前端使用axios發(fā)起post請(qǐng)求后端(springboot)接收不到值解決辦法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-03-03
解讀element-ui使用el-upload,before-upload函數(shù)不好使的問(wèn)題
這篇文章主要介紹了解讀element-ui使用el-upload,before-upload函數(shù)不好使的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
在我們開(kāi)發(fā)項(xiàng)目中,特別是流程審批類(lèi)的項(xiàng)目,最后一步會(huì)提交審核,審核員看完相應(yīng)信息以后,沒(méi)問(wèn)題就會(huì)簽字通過(guò)審批,這篇文章主要給大家介紹了關(guān)于VUE簽字組件vue-esign安裝使用的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue?mergeProps用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10
vue中項(xiàng)目頁(yè)面空白但不報(bào)錯(cuò)產(chǎn)生的原因及分析
這篇文章主要介紹了vue中項(xiàng)目頁(yè)面空白但不報(bào)錯(cuò)產(chǎn)生的原因及分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了Vue如何比較字符串變化并高亮變化的部分問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12