vue-cli 配置多环境

你可以通过以下步骤来配置多环境：

1. 创建不同的环境配置文件：在你的项目根目录下创建不同的环境配置文件，例如：

- `.env.development`：开发环境配置
- `.env.staging`：测试环境配置
- `.env.production`：生产环境配置

2. 配置环境变量：在每个环境配置文件中，设置对应的环境变量。例如，在`.env.development`中，你可以设置以下内容：

VUE_APP_API_URL=http://localhost:8080/api

3. 使用环境变量：在你的代码中，可以使用`process.env.VUE_APP_API_URL`来访问相应的环境变量。例如，在 Vue 组件中：

<template>
  <div>
    API URL: {{ apiUrl }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: process.env.VUE_APP_API_URL
    }
  }
}
</script>

4. 配置构建命令：在`package.json`文件中的`scripts`部分，配置不同环境的构建命令。例如：

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

这样，你就可以使用不同的命令来构建不同环境的应用了。例如，运行`npm run build:dev`将使用开发环境配置进行构建。

希望对你有所帮助！如果还有其他问题，请随时提问。