vue.js如何更改默认端口号8080为指定端口的方法

本文介绍了vue.js如何更改默认端口号8080为指定端口，分享给大家，希望此文章对各位有所帮助。 执行npm run dev实际是在调用根目录下的package.json 打开package.json后可发现有这样一段代码 "scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js", "lint": "eslint --ext .js,.vue src" } 由此可知，我们应该查看build目录下的dev-server.js文件 在dev-server.js文件中可找到 Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。在开发过程中，Vue应用程序通常通过一个默认的端口号，如8080，来运行。如果你需要更改这个默认端口，以便避免与其他应用冲突或者满足特定的项目需求，下面将详细介绍如何进行操作。 我们执行 `npm run dev` 来启动Vue项目的开发服务器。这个命令是根据`package.json`文件中的`scripts`部分定义的。打开`package.json`，你会看到类似以下的配置： ```json { "scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js", "lint": "eslint --ext .js,.vue src" } } ``` 这表明`npm run dev`实际上会运行`build/dev-server.js`脚本。因此，我们需要修改这个脚本来改变默认端口。 打开`build/dev-server.js`文件，在文件中查找配置端口的部分，一般会看到类似这样的代码： ```javascript var uri = 'http://localhost:' + port; ``` 这里的`port`变量就是我们要修改的端口号。接下来，我们需要找出`port`变量的来源。在`dev-server.js`文件的开头，可能看到： ```javascript var path = require('path'); ``` `path`模块是从Node.js内置的模块引入的，它并不直接与端口号设置相关。实际上，端口号的配置通常在项目的配置文件中，对于Vue项目，这个配置文件通常位于`config/index.js`。 打开`config/index.js`，在`dev`对象下，你会看到如下配置： ```javascript dev: { env: require('./dev.env'), port: 8080, // 这里就是默认端口 autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, cssSourceMap: false } ``` 要更改默认端口号，只需要将`port`的值修改为你想要的任何可用端口，例如： ```javascript port: 3000, // 修改为3000或其他未被占用的端口 ``` 保存更改后，重新运行`npm run dev`，你的Vue项目就会在新指定的端口上启动。如果需要在项目中改变其他配置，如代理设置、静态资源路径等，也可以在`config/index.js`中找到相应的选项进行调整。 更改Vue.js的默认端口号涉及修改`config/index.js`文件中的`port`配置，然后重启开发服务器。这个过程可以帮助开发者灵活地管理和配置自己的Vue项目，以适应不同的开发环境和需求。