环境切换

第一步先要了解都是有什么环境!!!

一共呢是有着5种环境:::

本地环境

测试环境

灰度环境

预发布环境

成产环境

有着两种方案去解决环境接口地址切换

第一种:通过cross-evn配合webpack来进行配置,还需要node
可以去参考https://www.npmjs.com/package/cross-env
1.先进行下载使用命令npm install --save-dev cross-env
2.在package.json中的script标签里面配置环境变量
读取环境变量: process.env.环境变量的名称
代码::::

"scripts": {
"serve": " cross-env BUILD_ENV=dev vue-cli-service serve",
"build": " cross-env BUILD_ENV=prod vue-cli-service build",
},
在vue.config.js中配置添加自定义的环境变量

代码::::

module.exports = {
// lintOnSave: false,
chainWebpack: config => {
config
.plugin('define')
.tap(args => {
console.log(args) // [ { 'process.env': { NODE_ENV: '"development"', BASE_URL: '"/"' } } ]
// 由于环境变量里面没有我们在package.json中添加的环境变量BUILD_ENV所以我们进行了添加:
console.log('process:', process.env.BUILD_ENV)
args[0]['process.env'].BUILD_ENV = JSON.stringify(process.env.BUILD_ENV)
return args
})
}
}
接着再src文件中见一个build文件然后在里面建一个dev.js和prod.js(注意这两个文件名要和package.json中配置的环境变量要一致)
在两个文件中配置url例如:

module.exports = { BASE_URL: 'http://test.365msmk.com' }

接着在封装的axios中写上这样可以自动切换

console.log('process:', process.env.BUILD_ENV) //prod||dev
const confi = require(`../build/${process.env.BUILD_ENV}.js`)
const service = axios.create({
baseURL: confi.BASE_URL,
timeout: 2500
})

posted @ 2020-05-20 23:56  孟~先~生  阅读(264)  评论(0编辑  收藏  举报