?devServer: { // 環(huán)境配置
? ? ? ? host: '0.0.0.0',
? ? ? ? port: 8080,
? ? ? ? https: false,
? ? ? ? hotOnly: false,
? ? ? ? disableHostCheck: true,
? ? ? ? open: false // 配置自動啟動瀏覽器
? ? },

或者在package.json文件下"scripts"的"dev"后面加上–host 0.0.0.0"，如果沒有dev就找serve

"scripts": {
? ? "serve": "vue-cli-service serve --host 0.0.0.0",
? ? "build": "vue-cli-service build",
? ? "lint": "vue-cli-service lint"
? },

設(shè)置完成之后就可以用ip+端口號的形式來訪問項目

在使用network進(jìn)行局域網(wǎng)訪問時注意

局域網(wǎng)訪問訪問需要打開出站、入站規(guī)則
防火墻默認(rèn)打開，無法進(jìn)行network的ip訪問，ip為本機在局域網(wǎng)中的地址
關(guān)閉防火墻（公用網(wǎng)絡(luò)）和安全軟件即可

設(shè)置完成即可使用其它設(shè)備在同一局域網(wǎng)下進(jìn)行訪問了

注意：

如果更換了網(wǎng)絡(luò)狀態(tài)，ip地址就會發(fā)生改變，就不能用舊的ip地址訪問，要使用新ip來訪問項目

vue項目Network: unavailable的解決

vue項目npm run serve 后，只有l(wèi)ocalhost訪問，network不能訪問，如下：

由于這個Network是被寫死進(jìn)文件中的，所以如果網(wǎng)絡(luò)被切換了，記得修改ip地址，確保與當(dāng)前的聯(lián)網(wǎng)ip一致

解決辦法

在vue項目根目錄下找到或創(chuàng)建 vue.config.js 文件

在devServer配置里面添加public，如下代碼所示。 public:‘192.168.1.2:8080’,

module.exports = {
    configureWebpack: {},
    devServer: { // 環(huán)境配置
      host: '0.0.0.0',
      public: '192.168.1.2:8080', // 此處是自己電腦IP地址！
      port: '8080',
      https: false,
      disableHostCheck: true,
      open: false // 配置自動啟動瀏覽器
    }
}

那么，如何看public后的自己電腦IP地址？

方法一：

打開控制面板\所有控制面板項\網(wǎng)絡(luò)和共享中心

在網(wǎng)絡(luò)連接窗口中雙擊打開正在使用的網(wǎng)絡(luò)