1、在根目录新建四个文件
项目跟路径.png
1.1（.env文件）
初始化设置全局对象process.env属性
vue-cli中规定，只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_URL：接口请求的域名
NODE_ENV = development
BASE_URL = '/'
VUE_APP_URL = 'https://***.******.***'
1.2（.env.dev文件）
开发环境下的配置文件
NODE_ENV = development
BASE_URL = '/'
VUE_APP_URL = 'https://www.development.com'
1.3（.env.prod文件）
生产环境下的配置文件
NODE_ENV = production
BASE_URL = '/'
VUE_APP_URL = 'https://www.production.com'
1.4（.env.test文件）
测试环境下的配置文件
NODE_ENV = test
BASE_URL = '/'
VUE_APP_URL = 'https://www.test.com'
2、在package.json中配置scripts 关联打包部署对应的.env文件
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode dev",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode prod",
"lint": "vue-cli-service lint"
},
对应打包运行的命令：
npm run build //开发环境
npm run build:test //测试环境
npm run build:prod //生产环境
3、在axios中应用
创建axios实例，通过axios.create()创建实例，配置实例中baseURL属性的值为 process.env.VUE_APP_URL即可在各环境下请求对应的接口域名
const instance = axios.create({
baseURL: process.env.VUE_APP_URL,
timeout: 5000,
transformRequest: data => {
return qs.stringify(data, { allowDots: true })
}
})
