根本介绍

通过 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 flagENV = 'development'# base apiVUE_APP_STRAPI_URL = '/dev-api'VUE_APP_STRAPI_URL = http://192.168.9.9966:1122VUE_APP_MSG_BOT_UR = http://192.168.9.8855:1122

.env.production 文件内容：

# just a flagENV = 'production'# base apiVUE_APP_STRAPI_URL = '/prod-api'VUE_APP_STRAPI_URL = http://192.168.9.0077:2233VUE_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:1122console.log(process.env.NODE_ENV) // development

Axios 简略封装

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

import axios from 'axios'// create an axios instanceconst 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 文件导入相应接口就好。