動態

詳情 返回 返回

vue項目中webpack-dev-server的open和host0.0.0.0配置衝突 - 動態 詳情

一個比較老的公司項目，webpack 用的 v3 版本，為了實現localhost、127.0.0.1和本機ip可以同時訪問，webpack的devServer裏的 host 我們一般會設置成 0.0.0.0，這樣本機所有 ipv4 地址都可以實現訪問。

比如我們要將本地運行的前端項目，分享給公司的後端、產品、測試...預覽效果，如果 host 直接設置的 localhost，運行後打開的地址 http://localhost:8080，直接分享給別人是沒法打開的。

為了解決上面局域網共享的問題，我們就需要將前端服務運行在 0.0.0.0，然後將本機的 ipv4 地址如：http://192.168.2.228:8080 分享給別人，同一局域網內的用户就可以直接訪問了。

瀏覽自動打開了http://0.0.0.0:8080

但是當我們設置之後，默認自動打開的瀏覽器地址和終端輸出的運行地址也變成了：http://0.0.0.0:8080，更要命的是這個地址在 windows 上是被當成無效地址沒法訪問的，mac上是可以直接訪問。

查看 webpack 配置，注意只保留了相關的主要代碼：

// webpack.dev.conf.js
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  devServer: {
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.open,
  }
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

當設置了自動打開瀏覽器 open 時，打開的地址會直接用我們設置的 host，所以會打開 http://0.0.0.0:8080。首先需要將服務運行的地址和我們瀏覽器裏打開的地址分開設置，服務運行地址我們需要固定成 0.0.0.0，但瀏覽器裏打開的地址我們不需要這個。

第一點我們可以直接通過 scripts 裏的命令來設置 --host 參數指定 0.0.0.0，直接在命令行裏傳遞的參數優先級最高，修改 package.json:

{
  "name": "front-end",
  "version": "1.0.0",
  "description": "客户端",
  "author": "cafehaus",
  "private": true,
  "scripts": {
    "predev": "yarn",
    "dev": "webpack-dev-server --inline --progress --host 0.0.0.0 --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
}

devServer.public 配置瀏覽器地址

然後可以通過 devServer.public 配置來設置瀏覽器要打開的地址，不過只能webpack的v3和v4版本使用，而且這個必須設置完整的 host:port，但是這個地方的port我們又不能寫成固定的，因為如果自己設置的端口被佔用了，webpack-dev-server實際運行起來會幫我們找一個系統未被佔用的端口。

我們可以藉助 portfinder-sync 來查找系統的可用端口，然後設置給 public，大概的代碼思路如下：

const config = require('../config')
const portFinderSync = require('portfinder-sync')
const port = portFinderSync.getPort(config.dev.port)

const devServer = {
  host: 'localhost',
  open: true,
  port,
  public: `localhost:${port}`,
},

終極解決方案

要獲取實際使用的端口，webpack 其實有用到 portfinder 這個包，我們直接在 webpack.dev.conf.js 裏改下最後面的配置就可以了，直接在 portfinder 那設置下 devWebpackConfig.devServer.public 就可以了，我們還可以藉助 address 來獲取本機的 ipv4 地址，用 chalk 來美化輸出：

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const address = require('address')
const chalk = require('chalk')

const HOST = process.env.HOST || config.dev.host || '0.0.0.0' // 服務地址，設置成 0.0.0.0 可以讓本機上所有 ipv4 地址訪問
const LOCAL_HOST = config.dev.host || 'localhost' // 本地訪問地址
const LOCAL_IP = address.ip() // 本地 ip
const PORT = (process.env.PORT && Number(process.env.PORT)) || config.dev.port || 8080 // 端口

const devWebpackConfig = merge(baseWebpackConfig, {
  devServer: {
    host: HOST,
    port: PORT,
    open: config.dev.autoOpenBrowser,
  }
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = PORT
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port
      devWebpackConfig.devServer.public = `${LOCAL_HOST}:${port}`,

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [
            `  App running at:`,
            `  - Local:   ` + chalk.cyan(`http://${LOCAL_HOST}:${port}`)
            `  - Network: ` + chalk.cyan(`http://${LOCAL_IP}:${port}`)
          ],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

webpack-dev-server 的幾個相關配置

devServer.host

配置訪問地址，host：主機、服務機，v3 和 v4 版本默認 localhost，v5 版本默認是 0.0.0.0

devServer.port

端口

devServer.public

可以用來設置默認打開瀏覽器的地址，注意 v3 和 v4 版本才有這個配置，webpack v5 版本已經沒有這項配置了

相關文檔

  • portfinder，獲取端口
  • portfinder-sync，基於 portfinder 的同步版
  • friendly-errors-webpack-plugin
  • webpack-dev-server open and host opens wrong URL
webpack-dev-server , vue.js , webpack , 前端
點贊

Add a new 評論

Some HTML is okay.