1.如何安装axios？
①可以通过CDN的方式直接引入到html中，然后在JS中直接使用，方式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
axios({
url:"https://www.baidu.com/",
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
method:'post',
data:{age:30}
}).then((res)=>{
console.log(res);
}).catch((err)=>{
console.log(err)
})
</script>
</body>
</html>
②通过Vue-cli脚手架+webpack前端自动打包工具使用npm安装，方式如下：
首先使用npm安装方式电脑必须安装git和NodeJS（无脑安装下一步，下一步），然后在git安装的文件夹中找到Git Bash，打开Git Bash,开始配置淘宝 NPM 镜像，在Git Bash命令行中输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
1.png
配置好淘宝镜像之后（因为用原始的npm安装文件会非常慢，使用淘宝镜像会快很多，建议还是配置一下）,
就可以全局安装vue脚手架vue-cli了，在git bash中输入
cnpm install --global vue-cli 注：此命令只需要执行一次
2.png
vue脚手架安装好之后，就可以使用它来创建vue项目了，在git bash中输入
vue init webpack demo-axios 在当前git bash路径下创建名为demo-axios的项目
然后一路回车就行，碰到询问是否安装XX的时候，根据自己的项目需要按n或y
3.png
安装好了之后我们看看项目能否运行，在git bash中输入
cd demo-axios 进入到项目根目录
cnpm install 安装程序运行所需要的一些包的依赖
npm run dev 运行项目
4.png
如下图表示项目搭建成功
5.png
下面来安装axios，在git bash中进入项目根目录，然后安装axios，输入
cnpm install axios --save
6.png
安装完成之后，我们要把axios导入vue项目中使用，在项目根目录下的src/main.js中添加如下代码
import axios from 'axios'
Vue.prototype.axios=axios
7.png
之后就可以在vue的组建中使用axios了，axios的API文档里写的已经非常清楚了，就不在这里一一介绍，推荐axios中文文档，demo用法如下图
8.png
2.如何解决开发环境和生产环境接口地址的自动转换？
首先我们来看本地开发环境，当我们遇到不允许跨域访问接口的时候，就要利用node服务中的代理为我们解决前端接口跨域访问的问题，如何配置代理呢？首先要找到项目根目录中的config文件夹，然后打开里面的index.js，做如下修改
proxyTable: {
'/api':{
target:'http://codetpx.lncwkj.com', //设置你调用的接口域名和端口号
changeOrigin:true, //是否跨域
pathRewrite:{
'^/api':'' //这里理解成用‘/api'代替target里面的地址，后面组件中我们调接口时直接用api代替 比如我要调用'http://codetpx.lncwkj.com/xxx/duty?age=30'，可在axios的url中直接写‘api/xxx/duty?age=30'即可
}
}
}
<template>
<div id="app">
<img src="./assets/logo.png">
</div>
</template>
<script>
export default {
name: 'App',
mounted(){
this.axios({
url:"api/diydangao/webservice/registerUser", //就相当于访问了http://codetpx.lncwkj.com/diydangao/webservice/registerUser的接口
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
method:'post',
data:{
phone:"123123123",
"verify_code":"36055",
password:123,
city:"辽宁省/沈阳市/浑南区",
H5:1,
platform:1,
devtoken:1,
region_id:542,
icode:"AC77",
}
}).then((res)=>{
console.log(res);
}).catch((res)=>{
})
}
}
</script>
解决了本地环境跨域访问的问题，然后来看一下如何通过配置webpack来解决自动替换本地环境和生产环境接口地址，首先打开项目根目录中的config文件夹，找到里面的dev.env.js(本地环境配置文件)和prod.env.js(生产环境配置文件)，然后修改dev.env.js文件
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_BASE:"/api/" //此处配置本地环境接口基础路径，注意前后两个/符号别少了
})
最后修改prod.env.js文件
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_BASE:'"http://codetpx.lncwkj.com/"' //此处配置生产环境接口基础路径
}
两个根据环境切换接口地址的配置已经完成，然后就是如何使用这些配置文件了，首先要在根目录src下创建module文件夹，用于存放我们自己定义的js功能模块，然后在module下创建service.js文件，文件代码如下
import axios from 'axios' //引入axios
import qs from 'qs'
//之前我们没有安装qs模块，这里我们要在项目里先安装 cnpm install qs --save
//安装完成之后才能引入到这里，否则会报错。
//qs模式的作用是：当我们用post的请求接口时候，后台可能会接收不到前端发送的data数据，
//这时我们就要用到qs模块对post请求发送的数据进行处理，
//qs.stringify(data),然后把处理后的数据发送给后台，
//注意这里post请求headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}要这么配置才行
import Vue from 'vue'
let baseURL=process.env.API_BASE.toString();//获取配置好的基础路径，直接使用process.env.API_BASE并不是字符串，所以这里要转换
axios.defaults.baseURL = baseURL;//baseURL用于自动切换本地环境接口和生产环境接口
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//注意！！！使用拦截器服务器出错进入不了catch
//拦截器 相当于jq ajax 中的before 请求之前处理一些逻辑
/*axios.interceptors.request.use((config)=>{
console.log("拦截器before");
return config;
},(error)=>{
return Promise.reject(error);
})*/
//拦截器after 相当于jq ajax 中的after
/*axios.interceptors.response.use((response)=>{
console.log("拦截器after");
return response;
},(error)=>{
return Promise.reject(error);
})*/
//封装axios,用于异步操作的同步写法，与async结合使用
const api={
get(url,data){
return new Promise((resolve,reject)=>{
axios.get(url,{params:data}).then((res)=>{
resolve(res)
}).catch((err)=>{
reject(err);
})
})
},
post(url,data){
return new Promise((resolve,reject)=>{
axios.post(url,qs.stringify(data)).then((res)=>{
resolve(res)
}).catch((err)=>{
reject(err);
})
})
}
}
export {api,axios}
最后我们在vue组件中使用封装和配置好的axios方法
<template>
<div id="app">
<div class="box">
</div>
<img src="./assets/logo.png"/>
</div>
</template>
<script>
import {api,axios} from "./module/axiosInstance.js"
export default {
name: 'App',
methods:{
async fn(){
let tempA=await api.post('diydangao/webservice/registerUser',{
phone:"123123123",
"verify_code":"36055",
password:123,
city:"辽宁省/辽阳市/辽阳市",
H5:1,
platform:1,
devtoken:1,
region_id:542,
icode:"AC77",
});
alert(tempA);
let tempB=await api.post('diydangao/webservice/registerUser',{
phone:"123123123",
"verify_code":"36055",
password:123,
city:"辽宁省/辽阳市/辽阳市",
H5:1,
platform:1,
devtoken:1,
region_id:542,
icode:"AC77",
});
alert(tempB);
}
},
mounted(){
this.fn();//执行async函数
axios({
url:"diydangao/webservice/registerUser",
method:'post',
data:{
phone:"123123123",
"verify_code":"36055",
password:123,
city:"辽宁省/沈阳市/沈阳市",
H5:1,
platform:1,
devtoken:1,
region_id:542,
icode:"AC77",
}
}).then((res)=>{
console.log(res);
}).catch((err)=>{
alert(err)
})
}
}
</script>
<style>
#app {
}
.box{
height: 300px;
width: 300px;
background-image: url(./assets/logo.png);
}
</style>
最后我们在根目录中运行写好的文件
npm run dev
接口已经跑通了，这时就可以打包代码，然后放到服务器中了，我们用npm打包命令
npm run build
然后找到项目根目录下的dist文件夹，打开里面的index.html,然后双击运行，发先网页一片空白，什么鬼？这时就要修改项目根目录中config文件夹里的index.js，找到如下代码
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //修改这里解决build之后为空白页 原直为'/',改为'./'
}
修改后再次build，发现已经可以正常使用了。
如果项目中使用了背景图片，打包后运行项目会发现引入的路径有些问题，背景图无法显示，那么就需要修改build文件夹下的utils.js代码，如图所示：
test.png
添加如图所示的一行代码，这样不论是字体还是图片的引用问题都能解决。
**本着开源共享的精神，把我第一次使用Vue-cli+webpack+axios过程中的遇到的一些问题进行了总结，也算是个扫盲篇吧，欢迎大家批评指正，有什么问题可以加我QQ：178874407一起讨论，或是留言 **
止水
于沈阳
2019/03/24 23：49
网友评论