Vue+webpack 项目不同环境，环境变量配置

第一步，在与package.json同级的目录创建配置文件：

.env.development 是开发环境下的配置文件
.env.production 是生产环境下的配置文件

如果这两个文件是空的，那么运行 npm run dev 时，process.env.NODE_ENV 的值默认就是 development；运行 npm run build 时，process.env.NODE_ENV 的值默认就是 production；

//package.json 文件
"scripts": {
    "dev": "vue-cli-service serve", // 默认是 development 开发环境
    "build": "vue-cli-service build", // 默认是 production 生产环境
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  },

第二步，在vue.config.js文件中打印输入 process.env.NODE_ENV ：

// vue.config.js文件
console.log(process.env.NODE_ENV,'======NODE_ENV ')

1、.env.development 和 .env.production文件为空，执行npm run dev，结果如图：

2、.env.development 和 .env.production文件为空，执行 npm run build ，结果如图：

第三步，在.env.development 和 .env.production 配置文件中配置接口请求地址，通过给 VUE_APP_API 赋值：

//.env.development文件
VUE_APP_API = 'http://xxx.xxx.xx.xx/api_dev'

//.env.production文件
VUE_APP_API = 'http://xxx.xxx.xx.xx/api_pro'

// request.js文件
import axios from 'axios'
// 创建axios实例
const service = axios.create({
	// 执行npm run dev，process.env.VUE_APP_API='http://xxx.xxx.xx.xx/api_dev'
    // 执行npm run build，process.env.VUE_APP_API='http://xxx.xxx.xx.xx/api_pro'
	baseURL: process.env.VUE_APP_API,
	// 超时时间
	timeout: 60000
})

 以上配置已经完毕。

除了默认配置文件，我们也可以自定义配置文件。

第一步，创建一个 .env.staging 文件：

第二步，在package.json 文件中配置如下：

"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build", 
    "build:staging": "vue-cli-service build --mode staging", 
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  },

当.env.staging 文件为空时，在 vue.config.js 中 console.log(process.env.NODE_ENV ,'======NODE_ENV ')，结果如图：

当在 .env.staging 文件中重新定义NODE_ENV 时，在 vue.config.js 中 console.log(process.env.NODE_ENV ,'======NODE_ENV ')，结果如图：

//.env.staging文件
NODE_ENV = myTest

综上，打包的时候，可以自定义环境变量。