axios、rem设置、服务器代理

axios、rem设置：

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


import axios from 'axios'
// 把axios添加到Vue的原型中，所有的组件（页面）（其实都是一个Vue对象）都可以直接访问到axios
Vue.prototype.http = axios;


Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// 设置html字体大小（rem)
function calculateHTMLFontSize() {
  var w = window.innerWidth;
  if (w < 500) {
    w = 500;
  }
  document.documentElement.style.fontSize = w / 80 + "px";
}

// 根据屏幕的宽度计算跟标签html的font-size
window.onresize = function () {
  console.log("屏幕大小发生变化了");
  calculateHTMLFontSize();
}

// 监听屏幕方向发生旋转
window.onorientationchange = function () {
  console.log("屏幕方向发生变化了");
  calculateHTMLFontSize();
}

store.js 

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import qs from 'qs';

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    remoteData: ""
  },
  mutations: {
    setRemoteData(state, value) {
      state.remoteData = value;
    }
  },
  actions: {
    testGet(store) {
      /*axios.get("/myserver/register/?name=zhagnsan&age=18").then(function(res){
        console.log(res.data);
        store.commit("setRemoteData",res.data);
      }).catch(function(err){
        console.log(err);
      });
      */
      axios.get("/myserver/register/", {
        params: {
          name: "张三",
          age: 21
        },
        headers: {
          a: "aaa",
          b: "bbb"
        }
      }).then(function (res) {
        console.log(res.data);
        store.commit("setRemoteData", res.data);
      }).catch(function (err) {
        console.log(err);
      });
    },

    testPost(store) {
      // 在axios请求中默认传递的数据类型:application/json
      /*axios.post("/myserver/register/",{
        account: "ananan",
        password: "131561556"
      }).then(function(res){
        console.log(res.data);
        store.commit("setRemoteData",res.data);
      }).catch(function(err){
        console.log(err);
      });*/

      // 传递数据类型是：application/x-www-form-urlencoded
      axios.post("/myserver/register/", qs.stringify({
        account: "ananan",
        password: "131561556"
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(function (res) {
        console.log(res.data);
        store.commit("setRemoteData", res.data);
      }).catch(function (err) {
        console.log(err);
      });
    },

    testAxios(store) {
      axios({
        // `url` 是用于请求的服务器 URL
        url: "/myserver/register/",
        // `method`是请求资源的方式
        method: 'POST',
        // `data`选项是作为一个请求体而需要被发送的数据
        data: {
          account: "ananan123",
          password: "131561556"
        },
        // `params`选项是要随请求一起发送的请求参数----一般链接在URL后面
        params: {
          name: "张三"
        },
        //`headers`选项是需要被发送的自定义请求头信息
        headers: {
          // 'Content-Type': 'application/x-www-form-urlencoded'
          // 'Content-Type': 'application/json'
          // 'Content-Type': 'multipart/form-data'
        },
        //`transformRequest`选项允许我们在请求发送到服务器之前对请求的数据做出一些改动
        //该选项只适用于以下请求方式：`put/post/patch`
        //数组里面的最后一个函数必须返回一个字符串、-一个`ArrayBuffer`或者`Stream`
        transformRequest: [function (data) {
          //在这里根据自己的需求改变数据
          return data;
        }]
      }).then(function (res) {
        console.log(res.data);
        store.commit("setRemoteData", res.data);
      }).catch(function (err) {
        console.log(err);
      });
    }
  }
})

服务器代理：

vue.config.js

module.exports = {
    // 做服务器代理
    devServer: {
        // 在vue项目提供的开发服务器（webpack）中不能添加接口，我们可以设置http代理，将请求代理到webpack服务器。
        // proxy设置项目的代理列表，其中可以添加多个代理规则。
        proxy: {
            // 接收到/myserver开头的请求，都会被转发到这条规则上
            "/myserver": {
                // 最终请求的目标路径
                target: "http://192.168.6.89:3000",
                // 是否转变请求源，必须设置为true（设置为false相当于重定向了）
                changeOrigin: true,
                pathRewrite: {
                    "^/myserver": ""
                }
            },
            "/douyu": {
                target: "https://open.douyucdn.cn",
                changeOrigin: true,
                pathRewrite: {
                    "^/douyu": ""
                }
            }
        }
    }
}