环境地址切换

首先来说一下都有什么环境
本地环境
测试环境
灰度环境
预发布环境
生产环境
有两种方案去解决环境接口地址切换
第一种：通过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",
  },

3.在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
      })
  }
}

4.接着再src文件中见一个build文件然后在里面建一个dev.js和prod.js（注意这两个文件名要和package.json中配置的环境变量要一致）
在两个文件中配置url例如：

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

5.接着在封装的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
})

第二种：
通过https://cli.vuejs.org/zh/guide/mode-and-env.html可以了解
“scripts”: {
“serve”: “vue-cli-service serve”, //development模式默认
“build”: " vue-cli-service build", //production模式线上模式
},
1.在文件中建类似于.env.development的文件前面的.evn不变只变后面的文件名一般development，production模式名字
在文件中写环境变量

NODE_ENV=环境名称   （production）
VUE_APP_自定义名称
VUE_APP_name=test

2.然后通过在package.json文件中写上类似于这样

"dev-build": "vue-cli-service build --mode development",

猜你喜欢