Vueでプロキシサーバを設定する

3683 ワード

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; //     ,         
	          })

別の使い方
  • は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;
    	                });