axiosのVUE（クロスドメイン設定エージェント）を使用して、グローバルメソッド

VUEプロジェクトの開発では、我々はaxiosは、AJAXリクエストも使用し、多くの人がaxiosの方法を使用して起動し、直接、「VUE-リソース」後の正面玄関ファイルからインポートVueResourceのつまり、導入、使用するために使用しVUE-resoureとして扱われます使用Vue.use（VueResource）の後に引用グローバルプラグインは、エラーのようaxiosこのような用途には、強制的に無意味です。

文書をよく見て、私はaxiosは、HTTPライブラリの約束に基づいており、axiosメソッドをインストールしていない知っている、それはvue.use（）メソッドを使用することはできません。☞表示VUEプラグは、
私たちはそれaxios一度、各ファイルを参照する必要がありますするつもりですか？そして、もっと複雑な！！！いくつかのソリューションがあります：
1.は、VUE-axios結合
2 Axios のVueのプロトタイププロパティ書き換え
アクション3. Vuexはの結合を

1.併用VUE-axios

読み出さVUE-axiosソースコードを、それを書き込む方法のVUEプラグです。そして、VUE-axiosと組み合わせて、あなたは、メソッドのvue.useを使用することを行くことができます

まず、第一入口main.jsファイルへの参照で：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

次に、あなたが使用することができ、およびコンポーネントファイルのメソッドの使用が行きます：

getNewsList(){
      this.axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })
}

Vueの（使用を推奨しません）のprototypeプロパティを書き換える2.axios

チェーンはVUEのプロトタイプに掛かった後一入口で参照まずmain.jsファイル：

import axios from 'axios'
Vue.prototype.$ajax= axios

アセンブリで使用されます：

this.$ajax.get('api/getNewsList')
.then((response)=>{
    this.newsList=response.data.data;
}).catch((response)=>{
    console.log(response);
})

アクションのVuex組み合わせは、
アクションを追加する方法を用いた倉庫ファイルstore.js vuexに引用しました

import Vue from 'Vue'
import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态
  state: {
    user: {
      name: 'xiaoming'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    login (context) {
      axios({
        method: 'post',
        url: '/user',
        data: context.state.user
      })
    }
  }
})

export default store

アセンブリ内の送信要求は、それが必要な場合は、これを使用します。$ Store.dispatchを

methods: {
  submitForm () {
    this.$store.dispatch('login')
  }
}

3.vue-axiosの役割

なぜファイルに、VUE-axiosソースを見てみません：

index.js

(function () {

/**
 * Install plugin
 * @param Vue
 * @param axios
 */

function plugin(Vue, axios) {

  if (plugin.installed) {
    return
  }
  plugin.installed = true

  if (!axios) {
    console.error('You have to install axios')
    return
  }

  Vue.axios = axios

  Object.defineProperties(Vue.prototype, {

    axios: {
      get() {
        return axios
      }
    },

    $http: {
      get() {
        return axios
      }
    }

  })
}

if (typeof exports == "object") {
  module.exports = plugin
} else if (typeof define == "function" && define.amd) {
  define([], function(){ return plugin })
} else if (window.Vue && window.axios) {
  Vue.use(plugin, window.axios)
}

})();

まず、に従ってVueあなたはあなたが登録した変数名を指定する必要がある場合には、VUEの使用を$をhttpにサインアップすると、プロジェクトコラボレーションの他のメンバー行う場合は、直接プロトタイプチェーンに関連付けられて書き込むための文書プラグイン家主として、不可能ではありません-axiosそれは曖昧さを持っていないでしょう。

仕様を満たし、およびコラボレーションを容易にするために、よりVUE-axiosを使用して、はっきりそれを置くために。

4.クロスドメイン（一次変性proxyTable）

VUE-CLIプロジェクトでconfig下のフォルダindex.jsプロファイル、dev長くこのように：

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},   
    cssSourceMap: false
  }

サーバーは長い間のインターフェースを提供している場合はhttps://www.exaple.com/server_new/login、私たちのような、ドメイン名を抽出しますhttps://www.exaple.com。

新しい設定ファイルで指定されましたproxyConfig.js ：

module.exports = {
  proxy: {
        '/apis': {    //将www.exaple.com印射为/apis
            target: 'https://www.exaple.com',  // 接口域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/apis': ''   //需要rewrite的,
            }              
        }
  }
}

アドレス自体が「/ API」は、この共通のプレフィックスは、それが言うことであればhttps://www.exaple.com/api、それが可能 pathRewrite に削除します。

configフォルダのindex.js紹介proxyConfig.js：

var proxyConfig = require('./proxyConfig')

configフォルダindex.jsのdev変更：

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxy,
    cssSourceMap: false
  }

プロジェクトを再起動しますnpm run dev：

私たちは、ローカルプロキシAPIを設定しているこの時間
（：簡単なテストは、クロスドメインのインタフェースすることができhttps://www.cnblogs.com/mvc/blog/signature.aspx?blogId=324092&blogApp=atjinna）

5.すべてはあまりにも痛いドメイン名を変更し、パッケージ？それについてのパッケージ

思路：在npm run dev的时候，ajax请求接口地址需要带上/apis，而如果我们在npm run build的时候，则需要将ajax接口地址改为真正的地址www.exaple.com，这样极其不方便，每次都要改。那我们便通过process.env.NODE_ENV来判断环境，从而导出不一样的接口。

写一个config.js文件，作为项目地址的配置。

如下：

//项目域名地址
const url = 'https://exaple.com';


let ROOT;
//由于封装的axios请求中，会将ROOT打包进去，为了方便之后不再更改，判断了当前环境，而生成的不同的ROOT
if (process.env.NODE_ENV === 'development') {
    //开发环境下的代理地址，解决本地跨域跨域，配置在config目录下的index.js dev.proxyTable中
    ROOT = "/apis"
} else {
    //生产环境下的地址
    ROOT = url;
}

exports.PROXYROOT = url; //代理指向地址
exports.ROOT = ROOT;

这里暴露出去了两个接口，一个作为代理指向地址，也就是真正的请求地址，一个则为我们的ajax请求的地址。

我们将ROOT引入我们配置的ajax中，再将proxyConfig.js修改如下：

const config = require("../src/fetch/config");  //路径你们改下
module.exports = {
  proxy: {
        [config.ROOT]: {    //将www.exaple.com印射为/apis
            target: config.PROXYROOT,,  // 接口域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                [`^${config.ROOT}`]: ''   //需要rewrite的
            }              
        }
  }
}

之后不管是生产环境，还是开发环境，都不用再修改我们的请求地址了。