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