关于vue-cli:vue-环境变量封装请求

根本介绍

通过 vue cli 搭建的我的项目，有三种模式

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

你能够通过传递 –mode 选项参数为命令行覆写默认的模式。如：

vue-cli-service build --mode development

在 执行 npm run build 的时候能够抉择不同的模式，进行打包

环境变量

在我的项目根目录下搁置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 疏忽
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 疏忽 

.env.development 文件内容：

# just a flag
ENV = 'development'

# base api
VUE_APP_STRAPI_URL = '/dev-api'

VUE_APP_STRAPI_URL = http://192.168.9.9966:1122
VUE_APP_MSG_BOT_UR = http://192.168.9.8855:1122

.env.production 文件内容：

# just a flag
ENV = 'production'

# base api
VUE_APP_STRAPI_URL = '/prod-api'

VUE_APP_STRAPI_URL = http://192.168.9.0077:2233
VUE_APP_MSG_BOT_UR = http://192.168.9.1188:2233

这样就能够针对不同的环境进行打包，也不必重复批改后端地址。

注：
只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 结尾的变量将通过 webpack.DefinePlugin 动态地嵌入到客户端侧的代码中。这是为了防止意外公开机器上可能具备雷同名称的私钥。

 查看以后的环境，接口地址
console.log(process.env.VUE_APP_STRAPI_URL) // http://192.168.9.9966:1122
console.log(process.env.NODE_ENV) // development

Axios 简略封装

1，request.js 里蕴含了两个后端地址的申请

import axios from 'axios'

// create an axios instance
const strapi = axios.create({
  baseURL: process.env.VUE_APP_STRAPI_URL, // url = base url + request url
  timeout: 5000 // request timeout
})

//  音讯后盾
const msgbot = axios.create({
  baseURL: process.env.VUE_APP_MSG_BOT_URL, // url = base url + request ur
  timeout: 5000 // request timeout
})

export default{
  strapi,
  msgbot
}

2，新建不同的 api 文件
2.1，strapi 文件

import request from '@/utils/request'
// 获取
export function getChannels() {
  return request.strapi({
    url: '/channels',
    method: 'get',
  })
}

2.2，音讯后盾

import request from '@/utils/request'
// 获取
export function getTemplateList(param) {
  let sql = '';
  param ? sql = '/'+ param : sql ='';
  return request.msgbot({
    url: '/v1/tpl'+sql,
    method: 'get',
  })
}

这样，最根本的接口封装实现了，只有在所需的 vue 文件导入相应接口就好。