Vue配置环境识别

一：创建文件.env(第一步和第二部用于识别多个环境 可以新增更多)

# 说明：用于本地开发或者WebPack打包构建时，根据环境采取不同策略
# 用途：区别「本地开发」与「打包」
# 使用：本地开发是development，打包为production
NODE_ENV=development
VUE_APP_ENV=dev
VUE_APP_API_ROOT=http://bcw.ishare-go.com

# 说明：当前项目的环境名称
# 用途：用于区分不同环境。开发 - dev  测试 - test  预发布 - pro  线上 - production
# 使用：在拼接上传文件路径时会有用到。详见doc/wiki/文件上传规范





# 说明：调用后端的API接口根路径
# 用途：接口请求直接使用该根路径，本地开发时，会使用devServer转发请求，避免跨域
# 使用：注意：已与后端约定，域名后必须有/api/。便于前端本地开发。





# 打包构建的路径，等价于config里的baseUrl




# 说明：七牛的Bucket名字，用于获取对应Token使用
# 用途：区别「线上环境」与「其他环境」

二：创建文件.env.bcw2  

NODE_ENV=production
VUE_APP_ENV=bcw2
VUE_APP_API_ROOT=http://bcw2.ishare-go.com

三：main.js

//备注 修改baseURL的时候需要搜索（http://bcw.ishare-go.com）全局修改 以及$url
console.log(process.env.VUE_APP_API_ROOT,'process.env.VUE_APP_API_ROOT,')
let baseURL=process.env.VUE_APP_API_ROOT   //自动识别环境
axios.defaults.withCredentials = true;
let instance = axios.create({
    baseURL: baseURL, //test分支 ==> 请求基地址
    // baseURL: 'http://msm.ishare-go.com', //master分支 ==> 请求基地址
    // timeout: 3000,//请求超时时长
    // url: '/url',//请求路径
    // method: 'get,post,put,patch,delete',//请求方法
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }, //请求头
    // params: {},//请求参数拼接在url上面
    // data: {},//请求参数放请求体里
})
Vue.prototype.$axios = instance
Vue.prototype.$url= baseURL   //图片路径前缀  发布时需要修改  main.js
axios.defaults.baseURL = '/api' //关键代码
Vue.config.productionTip = false

四：package.json文件（新增启动命令 用于识别环境）

  "scripts": {
    "dev": "npm run serve",
    "serve": "vue-cli-service serve",
    "build:bcw2": "vue-cli-service build --mode test --modern",
    "build": "vue-cli-service build --mode production --modern"
  },