修改Vue項(xiàng)目運(yùn)行的IP和端口

前言

我們在使用VsCode啟動Vue項(xiàng)目的時(shí)候，我發(fā)現(xiàn)：默認(rèn)的端口號好像和tomcat一樣，默認(rèn)都是8080，如果8080被占用了，就會使用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)修改

工作中可能存在啟動多個(gè)項(xiàng)目的時(shí)候，默認(rèn)端口號會被占，導(dǎo)致啟動錯(cuò)誤，這種情況下把要啟動的項(xià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)行后自動打開瀏覽器
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, //配置自動啟動瀏覽器
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)文章希望大家以后多多支持腳本之家！