1. 【情况变量】配景：
- 在我们的实际项目开发中，一样平常会区分几个情况，分别是开发情况、测试情况和生产情况，固然不清除分的比力细的另有预发布情况，一样平常来说这四个情况就充足我们利用了。
2. 新建情况步调：
- 2.1 在根目次下新建4个情况变量文件：
- .env.dev【开发情况】
- .env.test【测试情况】
- .env.uat【预发布情况】
- .env.prod【生产情况】
- 四个情况内的文件内容如下：
//.env.dev文件NODE_ENV = dev# base urlVUE_APP_BASE_URL = "https://dev.it98k.cn"--------------------------------------------------------------//.env.test文件NODE_ENV = test# base urlVUE_APP_BASE_URL = "https://test.it98k.cn"--------------------------------------------------------------//.env.uat文件NODE_ENV = uat# base urlVUE_APP_BASE_URL = "https://uat.it98k.cn"--------------------------------------------------------------//.env.prod文件NODE_ENV = prod# base urlVUE_APP_BASE_URL = "https://prod.it98k.cn"--------------------------------------------------------------2.2 然后修改package.json【scripts】下的启动下令:
"scripts": { "serve": "vue-cli-service serve --mode dev", "build:test": "vue-cli-service build --mode test", "build:uat": "vue-cli-service build --mode uat", "build:prod": "vue-cli-service build --mode prod" },
- 如许修改完，当地启动项目下令依然是：npm run serve
- 打包测试情况的下令是：npm run build:test
- 打包预发布情况的下令是：npm run build:uat
- 打包生产情况的下令是：npm run build:prod
3. 【基于axios的二次封装】配景：
- 在实际开发项目中，网络请求根本上利用axios网络请求工具，但是单纯的利用像axios.get('http://xxxxx.com')来请求接口，随着项目越来越大，页面越来越多，功能越来越美满，我们势必会写大量的axios请求，每次都这么写，费时费力，也不方便同一管理，以是，须要将axios举行二次封装，以达到我们开发项目的时间省时、省力、省心。
- 3.1 第一步，在src目次下，新建utils/request.js文件，文件内容如下：
//起首引入axiosimport axios from 'axios'//然后通过create方法来创建一个请求服务//然后create方法内有一些设置项，好比接口域名`baseURL`、接口请求超时时间`timeout`//接口url`url`//接口请求方式`method`等等，须要我们按需传入// create an axios instanceconst service = axios.create({ baseURL: process.env.VUE_APP_BASE_URL, // 完备的api地点 = 接口域名+ 接口路径 timeout: 5000 // 请求超时时间 5s})//下面会界说两个拦截器，分别是 `请求拦截器`，`相应拦截器`//`请求拦截器`是前端请求后端接口前处理处罚的一些逻辑，好比开启loading，设置header请求头等等//`相应拦截器`就是后端相应我们前端，返回返来的数据，好比我们可以在这相应拦截器内拿到status Code//拿到后端接口返回的code，关闭loading、根据code码处理处罚一些具体的逻辑等等一系列利用//request interceptor 请求拦截器 service.interceptors.request.use( config => { // do something before request is sent。在发送请求之前做一些事变 config.headers['token'] = "xxxxxx" return config }, error => { // do something with request error console.log(error) // for debug return Promise.reject(error) })// response interceptor 相应拦截器service.interceptors.response.use( response => { const res = response.data // if the custom code is not 20000, it is judged as an error. if (res.code !== 200) { alert(res.message || 'Error') return Promise.reject(new Error(res.message || 'Error')) } else { return res } }, error => { console.log('err' + error) // for debug alert(res.message || 'Error') return Promise.reject(error) })// 末了袒露我们声明的 service 服务export default service4. api的封装与利用
- api请求方法，也是要做一个封装的，封装流程如下
- 4.1 在src目次下新建api/index.js文件，文件内容如下：
import request from '../utils/request';//登录接口，post方式传参用dataexport function login(data) { return request({ url: '/api/login', method: 'post', data })}//获取xx列表接口，get方式传参用paramsexport function getList(params) { return request({ url: '/api/getList', method: 'get', params })}
- 4.2 利用封装好的api
- 在须要的页面，好比我们的登录页面须要调用登录接口，我们就要如许用
//起首第一步要用import导入进来我们的登录接口import { login } from '../api/index'//然后直接调用login方法login({username:'admin',password:"123456"}).then(res=>{ console.log(res);}) |
