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