Vue中设置代理服务器

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

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中导入

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

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

	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中导入时

	import axios from "axios";
Vue.prototype.axios=axios.create({
baseURL:"http://vebcoder.cn:9527/api"
});

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

this.axios.get("/getTypeOne").then(data => {
console.log(data.data)
this.type_list = data.data;
});

最后

以上就是俏皮电源为你收集整理的Vue中设置代理服务器的全部内容，希望文章能够帮你解决Vue中设置代理服务器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。