vue2脚手架，axios的baseURL如何根据环境文件使用，以及使用环境文件的详细步骤，以及npm如何引入env；vue.config.js中切换环境

在 Vue2 脚手架中，可以通过使用不同的环境文件来配置不同的 baseURL。下面是详细步骤：

1. 创建环境文件

在项目根目录下，可以创建以下三个环境文件：

- `.env`：默认的环境文件，适用于所有情况。
- `.env.development`：用于开发环境。
- `.env.production`：用于生产环境。

在环境文件中，可以添加相应的变量，比如：

VUE_APP_API_BASE_URL=http://localhost:8000

2. 引入环境文件

在 Vue2 中，默认情况下并不会自动引入环境文件中的变量，需要手动引入。可以在 `main.js` 文件中添加以下代码：

import dotenv from 'dotenv'

dotenv.config()

这样就可以在应用程序中使用环境变量了。

3. 使用环境变量

在应用程序中，可以通过 `process.env` 来访问环境变量。比如，在使用 axios 时，可以根据不同的环境文件设置不同的 baseURL，如下所示：

import axios from 'axios'

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL
})

export default instance

这样就可以根据不同的环境文件来配置不同的 baseURL，实现不同环境下的 API 调用。

4. 切换环境

在开发过程中，可以通过设置 `NODE_ENV` 变量来切换不同的环境。比如，在使用 `vue-cli-service` 命令启动开发服务器时，可以设置 `NODE_ENV` 变量，如下所示：

NODE_ENV=development vue-cli-service serve

这样就会自动加载 `.env.development` 文件中的变量，实现开发环境的配置。在构建生产版本时，可以设置 `NODE_ENV` 变量为 `production`，如下所示：

NODE_ENV=production vue-cli-service build

这样就会自动加载 `.env.production` 文件中的变量，实现生产环境的配置。

5. 使用 npm 引入环境变量

可以使用 `dotenv` 包来引入环境变量。首先，需要安装 `dotenv` 包：

npm install dotenv --save-dev

然后，在 `package.json` 文件中添加以下代码：

"scripts": {
  "serve": "NODE_ENV=development vue-cli-service serve",
  "build": "NODE_ENV=production vue-cli-service build",
  "start": "node -r dotenv/config ./node_modules/.bin/vue-cli-service serve"
},

这样，就可以使用 `npm start` 命令来启动开发服务器，并自动加载环境变量了。