vue學習--vue項目端口不固定，沒法指定問題

寫於20190819

　　前面是本身解決的思路，後面是解決方法以及須要記住的一些更改

 

package.json

以前只知道vue項目是基於node.js，對node.js瞭解不是很深刻，項目的開始文件是package.json。文件中主要觀察以下代碼：

 

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "e2e": "node test/e2e/runner.js",
  "test": "npm run unit && npm run e2e",
  "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
  "build": "node build/build.js"
},

能夠知道dev的位置在bulid/ webpack.dev.conf.js

webpack.dev.conf.js

問題出在以下代碼，這個函數本意是將basePort設置爲特定端口（默認是8080），以後選取8080端口，若是端口被佔用則日後取……可是經實驗發現，在這裏它會直接隨機取basePort到highestPort中一個端口，每次都不固定，即便8080端口沒有被佔用。

 

 

解決方法

網上查到事情是爆發在這兩天內的，是因爲portfinder更新引發的錯誤，在https://github.com/vuejs/vue-cli/issues/4452中提供瞭解決方法，將portfinder的版本回退：

npm install portfinder@1.0.21

 

然而這個對個人項目無效，直接在node.js下運行portfinder是正常的，然而在vue項目下仍是這個問題，我也不想深究緣由。鑑於我只是寫這個項目玩玩，我要作一個不太明智的更改，若是之後須要作一些正式的項目，但願該模塊或者vue已經更改完畢，以及但願之後作這個項目遇到錯誤能想到這個更改

 

個人解決方法是在webpack.dev.conf.js中添加一句，無視端口占用問題，將port固定下來

module.exports = new Promise((resolve, reject) => {

  portfinder.basePort = process.env.PORT || config.dev.port

  portfinder.getPort((err, port) => {

    port = process.env.PORT || config.dev.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)

    }

  })

})