vue-cli配置环境变量的方法

Vue CLI 是 Vue.js 官方提供的一个快速搭建 Vue.js 项目的工具，简化了项目配置的流程。在 Vue CLI 中，配置环境变量的方法如下：

1. 在 .env 文件中配置环境变量

在项目根目录下，新建一个.env文件，并添加环境变量。以VUE_APP_BASE_API为例，其格式为：

VUE_APP_BASE_API=http://www.example.com/api

该环境变量在应用中可以通过process.env.VUE_APP_BASE_API来获取。注意，环境变量名必须以VUE_APP_开头，否则不会被加载到应用中。

2. 在 .env.[mode] 文件中配置环境变量

另外一种配置环境变量的方式是在.env.[mode]文件中，其中[mode]指的是不同的构建模式，比如development、production等。以.env.production文件为例，其内容与.env文件相同：

VUE_APP_BASE_API=http://www.example.com/api

这种方式配置的环境变量仅在对应的构建模式中生效。

3. 在 package.json 文件中添加运行脚本

通过运行脚本来指定不同的构建模式。打开package.json文件，找到scripts字段，并添加如下代码：

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

以build:dev为例，它表示在开发模式下打包项目（未指定构建模式情况下默认为开发模式）。build:prod则表示在生产模式下打包项目。

示例说明

以应用中的 API 地址为例，我们可以在不同的环境中使用对应的地址。

1. 在.env文件中配置 API 地址

在.env文件中，添加如下代码：

VUE_APP_BASE_API=http://localhost:3000/api

1. 得到环境变量的值

在代码中，可以通过process.env.VUE_APP_BASE_API来得到配置的 API 地址：

const API_URL = process.env.VUE_APP_BASE_API

1. 使用不同的 API 地址

2. 在开发模式中，我们使用本地服务器的 API 地址。

3. 在生产模式中，我们使用线上服务器的 API 地址。

具体做法是，在.env.production文件中配置线上服务器的 API 地址：

VUE_APP_BASE_API=https://www.example.com/api

而在打包时指定构建模式为生产模式：

npm run build:prod

这样将会使用线上服务器的 API 地址。如果在开发模式下需要使用线上服务器的 API 地址，可以在.env.development文件中配置。