我是靠谱客的博主 俏皮电源,这篇文章主要介绍Vue中设置代理服务器,现在分享给大家,希望可以做个参考。

1.首先在vue.config.js文件中设置

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
module.exports = { publicPath: '/', // 启动页地址,vue4.0更新 outputDir: 'dist', // 打包的目录 lintOnSave: true, // 在保存时校验格式 productionSourceMap: false, // 生产环境是否生成 SourceMap devServer: { open: true, // 启动服务后是否打开浏览器 host: '0.0.0.0', port: 8080, // 服务端口 https: false, hotOnly: false, // 在这里设置代理服务器 > proxy: { > // 对象中键是本地请求地址,值是代理服务器配置对象 > // 注意: vue/cli已经安装并配置了代理模块,可以直接用 > "/mydouyu": { > target: "http://open.douyucdn.cn/api/RoomApi", > changeOrigin: true, > pathRewrite: { > "^/mydouyu": "" > } > } > }, before: app => { } } }

2.在main.js中导入

复制代码
1
2
3
4
5
6
// 全局导入axios插件 import axios from 'axios'; // 把导入的插件挂到Vue构造函数的原型上,然后,在各组件中就可以使用this.axios调用插件 Vue.prototype.axios = axios;

3.然后在请求数据页请求数据

复制代码
1
2
3
4
5
6
this.axios.get("/mydouyu/live?offset="+this.roomList.length).then(data=>{ // 把下一页数据拼接到现有的数据列表之后 this.roomList = this.roomList.concat(data.data.data) this.getting = false; // 开放节流,使可以请求下页数据 })

另一种使用方式

  1. 在main.js中导入时
复制代码
1
2
3
4
5
import axios from "axios"; Vue.prototype.axios=axios.create({ baseURL:"http://vebcoder.cn:9527/api" });

2.然后在请求数据页请求数据

复制代码
1
2
3
4
5
6
this.axios.get("/getTypeOne").then(data => { console.log(data.data) this.type_list = data.data; });

最后

以上就是俏皮电源最近收集整理的关于Vue中设置代理服务器的全部内容,更多相关Vue中设置代理服务器内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(75)

评论列表共有 0 条评论

立即
投稿
返回
顶部