Vue项目中配置不同环境的构建_创建环境变量文件_如何在Vue项目中使用不同的环境变量

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

Vue项目中配置不同环境的构建

在Vue项目中，想要针对不同的环境（比如开发、生产、预发布）做不同的配置，主要就是靠环境变量文件和构建脚本。下面我会详细解释怎么操作。

一、创建环境变量文件

在Vue CLI项目中，我们可以创建几个不同的文件来存放不同环境的变量。比如： - `.env.development`：用于开发环境 - `.env.production`：用于生产环境 - `.env.preproduction`：用于预发布环境在每个文件里，你可以定义不同的变量，比如： ```plaintext VUE_APP_API_URL= ``` 这些变量可以在你的代码中通过 `process.env` 访问。

举个例子：

```javascript console.log(process.env.VUE_APP_API_URL); ``` 这样，不同的文件可以有不同的配置，非常方便。

二、修改`vue.config.js`

在 `vue.config.js` 文件中，你可以根据环境变量来设置不同的构建选项。比如： ```javascript if (process.env.NODE_ENV === 'development') { module.exports = { devServer: { proxy: '' } }; } ``` 在这个例子中，根据不同的环境变量 `NODE_ENV`，我们设置了不同的代理。

这里有个表格对比：

环境	变量	配置
开发环境	NODE_ENV=development	开启开发服务器代理
生产环境	NODE_ENV=production	压缩代码，优化输出

三、更新构建脚本

为了更方便地构建不同环境的项目，你可以在 `package.json` 中定义不同的脚本： ```json "scripts": { "build:dev": "vue-cli-service build --mode development", "build:prod": "vue-cli-service build --mode production", "build:preprod": "vue-cli-service build --mode preproduction" } ``` 这样，你就可以通过运行 `npm run build:dev`、`npm run build:prod` 或 `npm run build:preprod` 来构建不同的环境。

步骤：

运行 `npm run build:dev` 构建开发环境
运行 `npm run build:prod` 构建生产环境
运行 `npm run build:preprod` 构建预发布环境

四、环境变量的使用

在Vue项目中，你可以通过 `process.env` 来访问环境变量。比如： ```javascript console.log(process.env.VUE_APP_API_URL); ``` 这样，你的代码就可以根据不同的环境变量来访问不同的API URL。

举个例子：

```javascript if (process.env.VUE_APP_API_URL) { // 使用 process.env.VUE_APP_API_URL } ```

五、实例说明

假设你有一个Vue项目，需要在不同的环境下使用不同的API URL和构建选项。下面是一个示例：

创建环境变量文件：

```plaintext .env.development VUE_APP_API_URL= .env.production VUE_APP_API_URL= .env.preproduction VUE_APP_API_URL= ```

修改 `vue.config.js`：

```javascript if (process.env.NODE_ENV === 'development') { // 配置开发环境 } ```

更新构建脚本：

```json "scripts": { "build:dev": "vue-cli-service build --mode development", "build:prod": "vue-cli-service build --mode production", "build:preprod": "vue-cli-service build --mode preproduction" } ```

在代码中使用环境变量：

```javascript console.log(process.env.VUE_APP_API_URL); ``` 通过以上步骤，你就可以成功地配置Vue项目在不同环境下的构建选项和API URL。

六、总结和建议

通过创建环境变量文件、修改 `vue.config.js` 和更新构建脚本，你可以轻松地在Vue项目中配置不同环境的构建选项和API URL。这种方式简化了环境配置的管理，提高了代码的可维护性和可读性。建议在实际项目中，根据需要进一步细化环境配置，并利用环境变量来管理更多的环境特性，如数据库连接、第三方服务的API密钥等。这样可以确保项目在不同环境下的稳定运行和有效测试。