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 文件导入相应接口就好。