vue项目中进行多环境配置

在Vue 项目中，进行多环境配置是一个常见需求，主要用于区分开发、测试、生产等不同环境下的API地址、密钥等配置。以下是一个基于Vue CLI创建的项目如何进行多环境配置的基本步骤：

1. 创建环境变量文件

在项目的根目录下，创建.env文件族，如.env.local（本地开发环境）、.env.development（开发环境）、.env.test（测试环境）、.env.production（生产环境）。Vue CLI会自动根据当前的模式加载对应的配置文件。

2. 在环境文件中设置变量

在每个.env文件中，定义所需的环境变量，例如：

# .env.development
VUE_APP_API_URL=http://dev.api.example.com

注意，环境变量的名称必须以VUE_APP_开头，这是Vue CLI识别环境变量的前缀。

3. 在项目中使用环境变量

在代码中，你可以通过process.env.VUE_APP_API_URL来访问上面定义的环境变量。

4. 使用`vue-cli-service`命令行工具构建项目

在不同的环境下，你可以使用不同的命令来构建项目，例如：

   # 开发环境
   vue-cli-service build --mode development
   
   # 生产环境
   vue-cli-service build --mode production

5. 配置package.json中的脚本

为了简化构建过程，你可以在`package.json`中的`scripts`部分配置相应的脚本命令：

   "scripts": {
     "serve": "vue-cli-service serve",
     "dev": "vue-cli-service serve --mode development",
     "prod": "vue-cli-service serve --mode production",
     "build:dev": "vue-cli-service build --mode development",
     "build:prod": "vue-cli-service build --mode production"
   }

这样就可以使用npm run build:dev或npm run build:prod来进行环境指定的构建。

//运行
npm run dev

npm run prod

//打包
npm run build:dev

npm run build:prod

6. 使用环境变量

const apiUrl = process.env.VUE_APP_API_URL;