修改 Vue.js 你该这样做·配置·在项目根目录下创建一个 `.env` 文件

作者：编程小白 | 发布时间：2025-07-09 |

修改 Vue.js 项目的默认端口，你该这样做！

在 Vue.js 项目中，你可能需要改变默认的端口号。别担心，这有几个简单的方法可以帮你做到： 一、修改配置文件 你可以通过修改配置文件来更改默认端口。这在 Vue CLI 3 及以上版本中特别有用。
  1. 在项目根目录下，找到或创建一个 `vue.config.js` 文件。
  2. 添加或修改 `devServer` 配置，设置 `port` 属性为你想要的端口号。
```javascript module.exports = { devServer: { port: 3000 } } ``` 这种方法的好处是配置集中，便于管理和查找。不过，每次修改后都需要重新启动开发服务器。 二、使用命令行参数 你也可以直接在启动开发服务器时，通过命令行参数指定端口号。 ```bash npm run serve -- --port 3000 ``` 这种方法很灵活，可以在不同的启动环境中使用不同的端口号。但缺点是每次都需要记住这个参数。 三、通过环境变量设置 Vue CLI 还支持通过环境变量来配置端口号。
  1. 在项目根目录下创建一个 `.env` 文件。
  2. 添加 `VUE_APP_PORT` 环境变量，并设置为你想要的端口号。
```env VUE_APP_PORT=3000 ``` 然后在 `vue.config.js` 中读取这个环境变量： ```javascript module.exports = { devServer: { port: process.env.VUE_APP_PORT || 8080 } } ``` 这种方法的好处是可以根据不同的环境设置不同的端口号，非常适合团队协作和持续集成。但缺点是需要额外管理 `.env` 文件。 四、实例说明 假设你有一个 Vue.js 项目，并希望在不同环境中使用不同的端口号。你可以在项目根目录下创建三个 `.env` 文件： - `.env.development` - `.env.test` - `.env.production` 然后在 `.env.development` 中设置： ```env VUE_APP_PORT=3000 ``` 在 `.env.test` 中设置： ```env VUE_APP_PORT=4000 ``` 在 `.env.production` 中设置： ```env VUE_APP_PORT=5000 ``` 这样，你可以根据不同的环境自动设置不同的端口号。 五、总结和建议 修改 Vue.js 项目的默认端口有几种方法，包括修改配置文件、使用命令行参数和通过环境变量设置。每种方法都有其优点和适用场景，你可以根据具体需求选择最合适的方法。 建议在团队项目中使用环境变量的方法，以便更好地管理不同环境中的配置。同时，保持配置文件的整洁和集中管理，可以提高项目的可维护性和可读性。如果是个人项目或临时需求，使用命令行参数也是一种快捷的方法。