在Vue CLI创建的项目中，通常默认提供了开发（dev）和生产（prod）两种环境，但这对于复杂的开发流程可能不够用。例如，我们可能需要测试环境（test）或预发布环境（stage）。本文将详细介绍如何配置Vue CLI项目以支持多环境。
在`package.json`文件中添加新的命令。`scripts`部分包含了针对不同环境的启动和构建命令，例如：
```json
"scripts": {
"dev": "cross-env NODE_ENV=online node build/dev-server.js --host 192.168.1.8",
"local": "cross-env NODE_ENV=local node build/dev-server.js",
"build": "node build/build.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
"build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js"
}
```
这些命令使用了`cross-env`包来设置`NODE_ENV`变量，确保在不同操作系统中环境变量的一致性，并且通过`env_config`区分不同的环境配置。
接着，我们需要创建对应的环境配置文件。在`/config`目录下，我们可以创建`dev.env.js`（开发环境）、`sit.env.js`（测试环境）和`prod.env.js`（生产环境），用于定义每个环境下的特定变量，如API的基础地址：
```javascript
// /config/dev.env.js
module.exports = {
NODE_ENV: '"development"',
ENV_CONFIG: '"dev"',
BASE_API: '"http://192.168.1.7"'
}
// /config/sit.env.js
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"sit"',
BASE_API: '"http://test.todomore.cn"'
}
// /config/prod.env.js
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"prod"',
BASE_API: '"http://www.todomore.cn"'
}
```
然后，需要在`config/index.js`中进行相应调整，以使项目在不同环境下正常运行。这里主要是配置开发服务器的端口、代理设置以及生产环境的输出路径等：
```javascript
module.exports = {
// ...
// 开发环境配置
dev: {
// ...
},
// 生产环境配置
build: {
// ...
}
}
```
由于我们的环境变量需要动态引入，需要修改`webpack.prod.conf.js`文件中的环境变量引用。原本是静态引入`prod.env.js`，现在改为动态引入：
```javascript
// 原来的代码：
// const env = require('../config/prod.env')
// 修改后的代码：
const env = require("../config/" + process.env.env_config)
```
至此，我们就成功地配置了Vue CLI项目以支持多环境。通过运行相应的`npm run`命令，项目会根据选择的环境加载相应的配置，如API的URL，从而实现不同环境之间的隔离。在实际开发中，这种配置方式使得团队成员可以方便地在各自的开发、测试和生产环境中切换，确保了代码的稳定性和可维护性。
