vue.jpg
一、Axios封装
安装Axios
- npm i -S axios
-
在src下新建文件件utils->request.js
image.png
import axios from 'axios'
// 创建axios对象
const request = axios.create({
baseURL: '/',
timeout:5000 //请求超时时间
})
// 请求拦截器
request.interceptors.request.use(config=>{
// 请求拦截
return config
},error=>{
// 异常
return Promise.reject(error)
})
// 响应拦截器
request.interceptors.response.use(response=>{
// 响应的数据 response.data
return response
},error=>{
// 异常
return Promise.reject(error)
})
export default request //导出自定义创建的axios对象
二、跨域解决
- 在服务器端修改端口号为8001
module.exports = {
devServer: {
port: 8001, //端口号
host: 'localhost', //主机名
https: false, //协议
open: true, //启动服务时自动打开浏览器访问
},
lintOnSave: false //关闭格式检查
}
- 客户端进行配置访问
module.exports = {
devServer: {
port: 8888, //端口号
host: 'localhost', //主机名
https: false, //协议
open: true, //启动服务时自动打开浏览器访问
proxy: {
// 匹配 /dev-api 开头的请求，
// '/dev-api': {
'/dev-api': {
// 目标服务器, 代理访问到 https://localhost:8001
// target: 'http://localhost:8001',
target: 'https://localhost:8081',
// 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，
// 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
changOrigin: true, //开启代理
pathRewrite: {
// 会将 /dev-api 替换为 '',也就是 /dev-api 会移除，
// 如 /dev-api/db.json 代理到 https://localhost:8080/db.json
// '^/dev-api': '',
'/dev-api':''
}
}
}
},
lintOnSave: false, //关闭格式检查
productionSourceMap: false // 打包时不会生成.map文件
}
三、最终配置结果请看图
- 在根目录下新建两个文件，分别是开发环境和生产环境
.env.development
.env.production
注意：顺序不要写乱了
.env.development下
# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 接口服务地址， 以你自已的为主
VUE_APP_SERVICE_URL = 'http://localhost:8001'
# 定义请求的基础URL, 方便跨域请求时使用
VUE_APP_BASE_API = '/dev-api'
.env.production下
# 使用 VUE_APP_ 开头的变量会被webpack自动加载
# 定义请求的基础URL，方便跨域请求时使用
VUE_APP_BASE_API = '/pro-api'
- 在vue.config.js进行配置
module.exports = {
devServer: {
port: 8888, //端口号
host: 'localhost', //主机名
https: false, //协议
open: true, //启动服务时自动打开浏览器访问
proxy: {
// 匹配 /dev-api 开头的请求，
// '/dev-api': {
[process.env.VUE_APP_BASE_API]: {
// 目标服务器, 代理访问到 https://localhost:8001
// target: 'http://localhost:8001',
target: process.env.VUE_APP_SERVICE_URL, // 在 .env.development 中配置的
// 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，
// 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
changOrigin: true, //开启代理
pathRewrite: {
// 会将 /dev-api 替换为 '',也就是 /dev-api 会移除，
// 如 /dev-api/db.json 代理到 https://localhost:8080/db.json
// '^/dev-api': '',
['^' + process.env.VUE_APP_BASE_API]:''
}
}
}
},
lintOnSave: false, //关闭格式检查
productionSourceMap: false // 打包时不会生成.map文件
}
- 在main.js中动态获取环境
Vue.config.productionTip = process.env.NODE_ENV === 'production'; //production生产环境 development开发环境
-
修改 utils/request.js 文件配置： baseURL: process.env.VUE_APP_BASE_API
image.png
import axios from 'axios'
// 创建axios对象
const request = axios.create({
// 请求配置参考: https://github.com/axios/axios#request-config
// 根据不同环境设置 baseURL, 最终发送请求时的URL为: baseURL + 发送请求时写URL ,
// 比如 get('/test'), 最终发送请求是: /dev-api/test
// baseURL: '/dev-api',
// baseURL: '/',
// 根目录下的 .env.development 与 .env.production 中配置 VUE_APP_BASE_API
baseURL: process.env.VUE_APP_BASE_API, // /dev-api/
timeout:5000 //请求超时时间
})
// 请求拦截器
request.interceptors.request.use(config=>{
// 请求拦截
return config
},error=>{
// 异常
return Promise.reject(error)
})
// 响应拦截器
request.interceptors.response.use(response=>{
// 响应的数据 response.data
return response
},error=>{
// 异常
return Promise.reject(error)
})
export default request //导出自定义创建的axios对象
- 在public下创建db.json文件
[
{"id":1,"name":"wangcai"},
{"id":2,"name":"lisi"},
{"id":3,"name":"zhangsan"},
{"id":4,"name":"zhaowu"},
{"id":5,"name":"liqiang"}
]
- 在src下创建文件夹（src--api--db.json）
import request from '@/utils/request'
export default{
getList(){
const req = request({
method:'get',
url:'/db.json'
})
return req
}
}
- 进行测试数据
<script>
import restApi from '@/api/test'
export default {
created() {
this.feachData()
},
methods: {
feachData(){
restApi.getList().then(res=>{
console.log(res.data)
})
}
},
};
</script>
image.png
今天就到此为止，后期会带来更多丰富的内容，感谢支持
0.jpg
网友评论