Vue引入当地实时天气数据(解决引入天气跨域问题)

免费天气接口

https://www.tianqiapi.com/index/doc

进入过后，注册，免费使用

export default {
    data() {
      return {
        localweather: {},
        weatherImg:''
      }
    },

因为接口给返回的天气图片并没有给图片地址，于是我在官网查看了官网用的天气图片链接，然后拼接了一下，发现几个天气图片都可以适用。

methods: {
    getWeather: function () {
        var _this = this;
        const url = '/weather?version=v6&appid=71549884&appsecret=XH6bWw5A'
        this.$axios.get(url).then(function (response) {
          _this.localweather = response.data
          _this.weatherImg = 'http://tq.daodaoim.com//tianqiapi/skin/pitaya/' + response.data.wea_img + '.png'
        }).catch(() => {
        })
      },
    },

 <img :src="weatherImg" v-bind:style="{width:'40px',height:'40px'}">

很多朋友留言，说跨域问题，，我今天本地跑了一下，找到问题所在了，大家使用之前记得配置，在config文件夹下面的index.js进行跨域代理，在dev代码块内部配置

因为大家还得使用自己的后台接口，所以天气接口的沃命名为weahter，自己的接口命名为api

  proxyTable: {

      '/weather': {
        target: "https://tianqiapi.com",
        changeOrigin: true,
        pathRewrite: {
          '^/weather': '/api'  // 这种接口配置出来     http://XX.XX.XX.XX:8083/api/login
        }
      },

      '/api': {
        target: "http://47.93.240.205:8800",
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'  // 这种接口配置出来     http://XX.XX.XX.XX:8083/api/login
        }
      },
    },