vue cli4下环境变量和模式示例详解

在Vue CLI 4中，环境变量和模式是开发过程中至关重要的组成部分，它们帮助我们根据不同的开发阶段（如开发、生产或测试）定制配置。本文将深入探讨如何在Vue CLI 4项目中使用环境变量和模式。 环境变量允许我们在不修改源代码的情况下改变应用程序的行为。Vue CLI 4支持多种环境变量，其中`NODE_ENV`和`BASE_URL`是最基础的两个。`NODE_ENV`用于指示当前应用运行的环境，常见的值包括"development"、"production"和"test"。而`BASE_URL`则与`vue.config.js`中的`publicPath`选项相对应，定义了应用部署的基础路径。 环境变量通常存储在`.env`文件中，遵循一定的命名规则。例如，`.env.development`用于开发环境，`.env.production`用于生产环境。Vue CLI会自动识别这些文件，并在相应的模式下加载对应的环境变量。任何以`VUE_APP_`开头的变量都可以在项目中通过`process.env.VUE_APP_变量名`进行访问。例如，我们可以创建`.env.development`文件，设置`VUE_APP_BASE_URL=http://127.0.0.1:8080/`，然后在`main.js`中使用`axios`设置请求基础路径。 ```javascript import axios from 'axios'; axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; ``` 除了默认的开发、生产和测试模式，Vue CLI 4也支持自定义模式。创建自定义模式的环境文件，如`.env.fat`，并设置相应的环境变量，如`VUE_APP_BASE_URL=http://fat.com/`。然后，我们可以在`package.json`中添加自定义脚本，比如`"serve-fat": "vue-cli-service serve --mode fat"`，这样就可以通过`npm run serve-fat`启动自定义的fat模式。 环境变量的优先级遵循以下顺序： 1. 运行时已存在的环境变量 2. 特定模式的`.env.[mode].local`文件 3. 特定模式的`.env.[mode]`文件 4. `.env.local`文件（会被git忽略） 5. `.env`文件 模式的概念允许我们为不同阶段的开发配置不同的环境变量，比如在生产模式下，我们可能需要关闭Vue的生产提示，或者在测试模式下设置特殊的API端点。通过这种方式，我们可以确保代码在不同环境下的表现一致，同时保持代码的整洁和可维护性。 Vue CLI 4的环境变量和模式机制为开发者提供了灵活的配置方式，使得我们能够轻松地管理不同环境下的应用配置。通过正确设置和使用这些环境变量，可以更好地适应开发、测试和生产环境的需求，提升开发效率和产品质量。