vue中的端口號(hào)如何改修

更新時(shí)間：2026年01月01日 17:15:25 作者：大寧寧吖

文章介紹了兩種在Vue項(xiàng)目中修改端口號(hào)的方法：一種是在`webpack.config.js`或`vue.config.js`中配置`devServer`,另一種是修改`package.json`中的`scripts`屬性,在`serve`或`dev`命令后加上`--port`指定端口號(hào)

vue端口號(hào)改修

方法一

在根目錄webpack.config.js或vue.config.js中配置devServer

module.exports = {
  devServer: {
    host: 'localhost',
    port: 9000, // 端口
  }
}

方法二

在package.json中的scripts進(jìn)行配置

若項(xiàng)目是用cli3+版本創(chuàng)建則在serve的屬性值后加上--port 9000，若是用cli2創(chuàng)建的項(xiàng)目則在dev的屬性值后加上--port 9000。

如下：

"serve": "vue-cli-service serve --port 9000",

配置完重新運(yùn)行項(xiàng)目即可

運(yùn)行效果如下：

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3使用element-plus組件不顯示問(wèn)題
這篇文章主要介紹了Vue3使用element-plus組件不顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟
Vue CLI是一個(gè)用于快速Vue.js開(kāi)發(fā)的完整系統(tǒng)。這篇文章主要介紹了Vue Cli3 創(chuàng)建項(xiàng)目的方法步驟，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-10-10
Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖
這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue3 自定義指令詳情
這篇文章主要介紹了 vue3 自定義指令詳情，自定義指令分為全局和局部?jī)煞N類型，大家并不陌生。今天我們就講講在 vue3 中，自定義指令定義、使用以及鉤子函數(shù)都有哪些變化？,需要的朋友可以參考一下
2021-11-11
Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果實(shí)例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-12-12
Vue如何提升首屏加載速度實(shí)例解析
這篇文章主要介紹了Vue如何提升首屏加載速度實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06
基于Vue-cli的一套代碼支持多個(gè)項(xiàng)目
這篇文章主要介紹了基于Vue-cli的一套代碼支持多個(gè)項(xiàng)目的方案，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-03-03
element plus el-table多選框跨頁(yè)多選保留功能
這篇文章主要介紹了element plus el-table多選框跨頁(yè)多選保留功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2025-05-05
Vue利用Web?Speech?API實(shí)現(xiàn)文字朗讀功能
在?Vue?頁(yè)面中實(shí)現(xiàn)文字朗讀（Text-to-Speech,TTS）可以通過(guò)瀏覽器的?Web?Speech?API?實(shí)現(xiàn),下面小編就來(lái)和大家簡(jiǎn)單講講具體實(shí)現(xiàn)步驟吧
2025-02-02
手寫(xiě)Vue2.0 數(shù)據(jù)劫持的示例
這篇文章主要介紹了手寫(xiě)Vue2.0 數(shù)據(jù)劫持的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-03-03