Vueでプロキシサーバを設定する
3683 ワード
1.まずvue.config.jsファイルでの設定
2.main.jsでインポート
3.要求データページでデータを要求する
別の使い方はmainです.jsでのインポート時
2.次に、要求データページでデータを要求する
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; // ,
})
別の使い方
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;
});