vuecli3复杂解决跨域、手机真机调试 2019-05-08

假设我们在开发一个项目，我这边写好了页面，同事写好了服务器，给的测试接口是：

http://192.168.1.1:8080/mobile/operation/reportForm/recordingTime.json，那么跨域就是如下解决。

1.在根目录新建vue.config.js文件，文件内如下：

// vue.config.js
module.exports = {
  //npm run build 的时候默认的dist文件夹名字会变成timeoutRemind，普通的npm run serve就不会，主要是上线路径的适应。
  publicPath: process.env.NODE_ENV === 'production' ? '/timeout-remind/' : '/',

  devServer: {
    //新版的webpack-dev-server增加了安全验证，默认检查hostname，如果hostname不是配置内的，将中断访问。
    //用natapp内网穿透的时候会出现 Invalid Host header，设置这个就不会进行安全验证，
    //配合内网穿透插件natapp，手机跟电脑就不需要在同一个局域网内也可以进行真机测试。
    disableHostCheck: true,

    open: true, //浏览器自动打开页面

    //host，真机测试IP地址，也就是你自己电脑的IP，你手机要跟你电脑在同一个局域网内，
    //特别强调，注意开发调试时的console.log()，打印过多会撑爆微信浏览器缓存，就打不开页面了，坑死。
    //访问192.163.1.109:8090就能真机测试啦，下面跨域的设置配好了也不用担心跨域问题。
    // host: "1192.163.1.109",
    // host: "localhost",

    //真机测试端口
    port: 8089,

    https: false,
    hotOnly: false, //热更新（webpack已实现了，这里false即可）

    //配置跨域
    proxy: {   
      //这个/api就是在封装http那个host用的，代表下面target的那串接口。
      '/api': {
          // target: "http://192.163.1.90:8080/mobile/operation/reportForm",//这里是你同事给你的数据接口，域名是另一台电脑的域名。
          target: "http://4pss6n.natappfree.cc/mobile/operation/reportForm",//配合natapp真机测试。
          ws:true,
          changOrigin:true,//是否跨域
          pathRewrite:{
            '^/api':'/'//路径重写，不知道是什么意思，但一定要写，除非是简单版的跨域配置。
          }
      }
    }
  }
}

2.封装axios，这里只是简单的封装一下，不封装也行，直接调用如下：

//封装http请求
import axios from "axios";
export default {
   http(url, param, success, failed) {
      var host = '/api'//这里就是上面跨域的那个/api啦
      var uuu = host + url//这个url接口的后段了
      axios({
            url: uuu,
            method: "get",
            params: param,
         })
         .then(function (response) {
            if(response.status == 200){
               success(response)
            } else {
               failed(response)
            }
         })
         .catch(function (error) {
            // eslint-disable-next-line no-console
            console.log(error);
         });
   }
}

3.直接在应用页面调用。

import Http from "./../unit/testHttp.js";
export default {
  components: {},
  data() {
    return {
      isLoading: true
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //获取数据
    getData() {
      const self = this;
      //这里就把后面的地址加上就行啦
      const url = "/recordingTime.json";
      const success = function(response) {
        const status = response.status;
        if (status == 200) {
          self.data = response.data;
        } else {
          console.log("获取失败");
        }
      };
      Http.http(url, success);
    }