vue学习--vue项目端口不固定，无法指定问题

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

写于20190819

　　前面是自己解决的思路，后面是解决方法以及需要记住的一些更改

package.json

之前只知道vue项目" title="vue项目">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 [email protected]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)
    }
  })
})

以上是 vue学习--vue项目端口不固定，无法指定问题 的全部内容， 来源链接： utcz.com/z/378408.html

回到顶部