如何修改Vue項(xiàng)目運(yùn)行的IP和端口
修改Vue項(xiàng)目運(yùn)行的IP和端口
前言
我們?cè)谑褂肰sCode啟動(dòng)Vue項(xiàng)目的時(shí)候,我發(fā)現(xiàn):默認(rèn)的端口號(hào)好像和tomcat一樣,默認(rèn)都是8080,如果8080被占用了,就會(huì)使用8081,8082這樣的方式以此類推。
那么,我們是否可以像后端一樣,通過(guò)修改port屬性的方式達(dá)到修改運(yùn)行端口的方式呢?
答案肯定是可以的,下面的就分享下是如何做到的:
修改配置文件
找到vue項(xiàng)目的配置文件:vue.config.js
這個(gè)東西吧,站在我后端角度理解,就好像是springboot中的application配置文件,在里面配置一些和項(xiàng)目有關(guān)的東西
比如我之前已經(jīng)配置過(guò)一個(gè)屬性,這要方式語(yǔ)法簡(jiǎn)單,導(dǎo)致出現(xiàn)各種莫名奇怪的錯(cuò)誤
目前我只用到了一個(gè)配置項(xiàng):
lintOnSave: false // 關(guān)閉語(yǔ)法檢查 防止不必要的語(yǔ)法報(bào)錯(cuò)
這里還是有幾個(gè)注意事項(xiàng)需要多bb幾句的
1:多個(gè)配置項(xiàng)之前,需要注意使用逗號(hào)隔開(kāi)
2:冒號(hào)不要用錯(cuò)了
如果你覺(jué)得直接修改port,那你就想的簡(jiǎn)單了!
看,直接報(bào)錯(cuò)。
ERROR Invalid options in vue.config.js: “port” is not allowed
解決報(bào)錯(cuò)
想要解決這個(gè)問(wèn)題,其實(shí)很簡(jiǎn)單。只需要再配置層devServer。把配置代碼寫(xiě)到里面即可:
祈禱我的項(xiàng)目沒(méi)有bug,給它個(gè)吉祥的端口
// 配置devServer devServer: { host: 'localhost', // 項(xiàng)目運(yùn)行的ip port: 8888, // 項(xiàng)目運(yùn)行的端口號(hào) }
配置文件全部代碼:
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, // 關(guān)閉語(yǔ)法檢查 防止不必要的語(yǔ)法報(bào)錯(cuò) // 配置devServer devServer: { host: 'localhost', // 項(xiàng)目運(yùn)行的ip port: 8888, // 項(xiàng)目運(yùn)行的端口號(hào) } })
測(cè)試效果
配置文件修改完之后,一定要記得重啟服務(wù),這樣才能生效!
可以使用ctrl+c終端終端,重新執(zhí)行npm run server
完美解決問(wèn)題!
總結(jié)
其實(shí)還是很簡(jiǎn)單的。這個(gè)vue.config.js和springboot的application配置文件是一個(gè)道理,需要修改項(xiàng)目什么東西就直接在里面改。注意語(yǔ)法就好啦!
補(bǔ)充:vue默認(rèn)端口號(hào)(port:8080)修改
工作中可能存在啟動(dòng)多個(gè)項(xiàng)目的時(shí)候,默認(rèn)端口號(hào)會(huì)被占,導(dǎo)致啟動(dòng)錯(cuò)誤,這種情況下把要啟動(dòng)的項(xiàng)目的端口號(hào)換掉,啟動(dòng)未用的端口就可以了,具體實(shí)現(xiàn)如下:
一 .vue-cli2
方式1. vue-cli2中端口文件存放目錄為:根目錄下/config/index.js
// Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, // 運(yùn)行后自動(dòng)打開(kāi)瀏覽器 errorOverlay: true, // 在瀏覽器是否展示錯(cuò)誤蒙層 notifyOnErrors: true, // 是否展示錯(cuò)誤的通知
host::改為電腦IP,同局域網(wǎng)內(nèi)其余電腦可訪問(wèn)你的項(xiàng)目 例:19.168.43.20:80
二.vue-cli3/vue-cli4
方式1. 端口文件存放目錄為:node_modules/@vue/cli-service/lib/commands/serve.js
const defaults = { host: '0.0.0.0', port: 80, https: false }
方式2. 在 package.json 文件中修改 scripts
"scripts": { "serve": "vue-cli-service serve --port 80", "build": "vue-cli-service build", },
方式3 在運(yùn)行項(xiàng)目的時(shí)候追加端口號(hào)
npm run serve -- --port 80
方式4 在根目錄新建【vue.config.js】,并配置如下,將覆蓋默認(rèn)的配置(更多配置詳情參見(jiàn)vue官網(wǎng)
module.exports = { publicPath: "/", //根路徑 Vue CLI 3.3 前使用 baseUrl outputDir: "dist1", //構(gòu)建輸出目錄 assetsDir: "assets", //靜態(tài)資源目錄 lintOnSave: false, //是否開(kāi)啟eslint保存檢測(cè) runtimeCompiler: true, publicPath: "/", // 設(shè)置打包文件相對(duì)路徑 devServer: { open: true, //配置自動(dòng)啟動(dòng)瀏覽器 host: "localhost", https: false, hotOnly: false, //熱更新 port: 80, // 配置跨域-請(qǐng)求后端的接口 proxy: { // "/api": { // target: "http://172.20.10.3:80", //對(duì)應(yīng)自己的接口 // changeOrigin: true, // ws: true, // pathRewrite: { // "^/api": "" // } // } } } }
注意: 改端口后,項(xiàng)目需要重新運(yùn)行
到此這篇關(guān)于修改Vue項(xiàng)目運(yùn)行的IP和端口的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目運(yùn)行的IP和端口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue子組件如何獲取父組件的內(nèi)容(props屬性)
這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue2 SSR渲染根據(jù)不同頁(yè)面修改 meta
本篇文章主要介紹了Vue2 SSR渲染根據(jù)不同頁(yè)面修改 meta,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11elementui中el-input回車搜索實(shí)現(xiàn)示例
這篇文章主要介紹了elementui中el-input回車搜索實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06淺談Vue路由快照實(shí)現(xiàn)思路及其問(wèn)題
這篇文章主要介紹了淺談Vue路由快照實(shí)現(xiàn)思路及其問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06Vue新搭檔TypeScript快速入門(mén)實(shí)踐記錄
TypeScript 是一種由微軟開(kāi)發(fā)的自由和開(kāi)源的編程語(yǔ)言,它是 JavaScript 的一個(gè)超集,擴(kuò)展了 JavaScript 的語(yǔ)法。這篇文章主要介紹了Vue新搭檔TypeScript快速入門(mén)實(shí)踐,需要的朋友可以參考下2021-06-06