如何修改Vue專案執行的IP和埠

2023-02-12 06:00:51

修改Vue專案執行的IP和埠

前言

我們在使用VsCode啟動Vue專案的時候，我發現：預設的埠號好像和tomcat一樣，預設都是8080，如果8080被佔用了，就會使用8081,8082這樣的方式以此類推。

那麼，我們是否可以像後端一樣，通過修改port屬性的方式達到修改執行埠的方式呢？

答案肯定是可以的，下面的就分享下是如何做到的：

修改組態檔

找到vue專案的組態檔：vue.config.js

這個東西吧，站在我後端角度理解，就好像是springboot中的application組態檔，在裡面設定一些和專案有關的東西

比如我之前已經設定過一個屬性，這要方式語法簡單，導致出現各種莫名奇怪的錯誤

目前我只用到了一個設定項：

lintOnSave: false // 關閉語法檢查防止不必要的語法報錯

這裡還是有幾個注意事項需要多bb幾句的

1：多個設定項之前，需要注意使用逗號隔開

2：冒號不要用錯了

如果你覺得直接修改port，那你就想的簡單了！

看，直接報錯。

ERROR Invalid options in vue.config.js: “port” is not allowed

解決報錯

想要解決這個問題，其實很簡單。只需要再設定層devServer。把設定程式碼寫到裡面即可：

祈禱我的專案沒有bug，給它個吉祥的埠

// 設定devServer
  devServer: {
    host: 'localhost', // 專案執行的ip
    port: 8888, // 專案執行的埠號
  }

組態檔全部程式碼：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,  // 關閉語法檢查 防止不必要的語法報錯
  // 設定devServer
  devServer: {
    host: 'localhost', // 專案執行的ip
    port: 8888, // 專案執行的埠號
  }
})

測試效果

組態檔修改完之後，一定要記得重啟服務，這樣才能生效！

可以使用ctrl+c終端終端，重新執行npm run server

完美解決問題！

總結

其實還是很簡單的。這個vue.config.js和springboot的application組態檔是一個道理，需要修改專案什麼東西就直接在裡面改。注意語法就好啦！

補充：vue預設埠號(port:8080)修改

工作中可能存在啟動多個專案的時候，預設埠號會被佔，導致啟動錯誤，這種情況下把要啟動的專案的埠號換掉，啟動未用的埠就可以了，具體實現如下：

一 .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, // 執行後自動開啟瀏覽器
errorOverlay: true, // 在瀏覽器是否展示錯誤蒙層
notifyOnErrors: true, // 是否展示錯誤的通知

host:：改為電腦IP，同區域網內其餘電腦可存取你的專案例：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 在執行專案的時候追加埠號

npm run serve -- --port 80

方式4 在根目錄新建【vue.config.js】，並設定如下，將覆蓋預設的設定（更多設定詳情參見vue官網

module.exports = {
publicPath: "/", //根路徑 Vue CLI 3.3 前使用 baseUrl
outputDir: "dist1", //構建輸出目錄
assetsDir: "assets", //靜態資源目錄
lintOnSave: false, //是否開啟eslint儲存檢測
runtimeCompiler: true,
publicPath: "/", // 設定打包檔案相對路徑
devServer: {
open: true, //設定自動啟動瀏覽器
host: "localhost",
https: false,
hotOnly: false, //熱更新
port: 80,
// 設定跨域-請求後端的介面
proxy: {
// "/api": {
// target: "http://172.20.10.3:80", //對應自己的介面
// changeOrigin: true,
// ws: true,
// pathRewrite: {
// "^/api": ""
// }
// }
}
}
}

注意：改埠後，專案需要重新執行

到此這篇關於修改Vue專案執行的IP和埠的文章就介紹到這了,更多相關Vue專案執行的IP和埠內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！