nuxt.jsサービス端末レンダリング中axiosとproxyエージェントの配置操作

npm axiosが必要ですか？
最初は普通のvue SPAのようにnpm axiosが必要だと思いましたが、このような方式は確かに有効です。しかし、使う時は不便です。特にプロキシを設定するのが面倒で、asyncDataでは普通のmethodsとは違っています。
その後、nuxtのgithubでnuxtはデフォルトでaxiosに統合されていることが分かりました。だからnpm axiosは必要ないですが、適切な配置が必要です。
以上は百度の到着で、いつも間違いを報告することを発見して、今ネット上の教程は完全に水掛け論で、npm axiosはインストールする必要がないので、しかし@nuxtjs/axiosはインストールします。
ステップ1:
npmインストール@nuxtjs/axios、ファイルのルートディレクトリの下でインストールして、命令は下記の通りです。
npm install@nuxtjs/axios
ステップ2:
nuxt.com fig.jsファイルにaxiosとproxyエージェントを配置すると、以下の図のようになる。

コピーしてもいいです

import pkg from './package' 
export default {
 mode: 'universal',
 
 /*
 ** Headers of the page
 */
 head: {
  title: pkg.name,
  meta: [
   { charset: 'utf-8' },
   { name: 'viewport', content: 'width=device-width, initial-scale=1' },
   { hid: 'description', name: 'description', content: pkg.description }
  ],
  link: [
   { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ]
 },
 
 /*
 ** Customize the progress-bar color
 */
 loading: { color: '#fff' },
 
 /*
 ** Global CSS
 */
 css: [
  'iview/dist/styles/iview.css'
 ],
 
 /*
 ** Plugins to load before mounting the App
 */
 plugins: [
  '@/plugins/iview'
 ],
 
 /*
 ** Nuxt.js modules
 */
 modules: [
  '@nuxtjs/axios'
 ],
 
 axios: {
  proxy: true, //       
  prefix: '/api', //      url     /api
  credentials: true //                
 },
 
 proxy: {
  '/api': { 
   target: 'https://www.apiopen.top', //       
   pathRewrite: {
    '^/api': '/', //   /api     /
    changeOrigin: true //       
   }  
  }
 },
 
 /*
 ** Build configuration
 */
 build: {
  /*
  ** You can extend webpack config here
  */
  extend(config, ctx) {
  },
  vendor: ['axios'] //        
 }
}

ステップ3:
コンポーネントに使う

<template>
 <div>my</div>
</template>
<script>
export default {
 created () {
  this.allList()
 },
 methods: {
  allList () {
   this.$axios.post(`/novelSearchApi?name=    `).then(res => {
    console.log(res)
   })
  }
 }
 
}
</script>
<style scoped>
</style>

補足知識：nuxt.js配置BASE_URL（基本ドメイン名）とNODE_ENV（環境変数）
ずっと以来、開発環境と生産環境のデータインターフェースのドメイン名が違って、いつも困っています。
毎回テストバッグやオンラインバッグをします。手でドメイン名を変えなければなりません。多くの人のやり方はこれと似ていると信じています。以下のようにします。

（あなたはすでに気づいています。このファイルはもう私の非情な削除されました。私は自分の新しい大陸を見つけましたので）
包装するたびにコメントを切り替えます。受け入れられますが、忘れたり間違えたりしやすいです。この設定ファイルを探して半日を探します。
私のこのような反応が鈍く、頭がよく短絡する人にとっては苦痛です。
ちょっと痛いです。解決方法を求めます。
第一歩：cross-envをインストールする（このミニパッケージは環境変数を設定するscriptsを提供することができます）
npm i cross-env-D
ステップ2：BASE_を配置するURLとNODE_ENV
私たちはpackage.jsonを持っているのではないですか？中にはスクリプトの対象がありますか？

// package.json
{
 "scripts": {
  "dev": "cross-env BASE_URL=https://devpc.17wawawa.com NODE_ENV=development nuxt",
  "start": "cross-env BASE_URL=https://devpc.17wawawa.com NODE_ENV=production nuxt start",
  "build": "cross-env BASE_URL=https://www.17wawawa.com NODE_ENV=production nuxt build",
  "test": "cross-env BASE_URL=https://test.17wawawa.com NODE_ENV=production nuxt generate",
  "generate": "cross-env BASE_URL=https://www.17wawawa.com NODE_ENV=production nuxt generate"
 },
}

まずcross-envを書いて、BASE_を配置します。URLとNODE_ENV，
cross-envは、プラットフォームにまたがって環境変数を設定し、使用することができますので、私達は異なるコマンド（npm run xxx）を実行する時に、対応するBASE_を設定します。URL（基本ドメイン名）とNODE_ENV（環境変数）
必ず注意してください。命令は必ず最後に書いてください。例えば、私の上のnuxt、nuxt start、nuxt buildなど。そうでないとnpm run時にエラーが発生します。
異なるコマンドを実行すると自動的に異なるBASE_を設定します。URLとNODE_ENV
npm run dev/BASE_URL=https://devpc.17wawawa.com NODE_ENV=development
npm run test/BASE_URL=https://test.17wawawa.com NODE_ENV=プロデュース
npm run generate/BASE_URL=https://www.17wawawa.com NODE_ENV=プロデュース
上のコードをそのままコピーしないでください。各項目のBASE_のためです。URLは普通は違っています。自分のプロジェクトのインターフェースに変えてドメインを要求します。
ステップ3：nuxt.com fig.jsを設定します。
package.jsonの中のscripts配置が完了したら、nuxt.co.nfig.jsに行ってenvを配置してください。公式文書です。

// nuxt.config.js
module.exports = {
 mode: 'universal',
 env: {
  BASE_URL: process.env.BASE_URL,
  NODE_ENV: process.env.NODE_ENV
 }
}

ステップ4：どうやって使うか
使うのが一番簡単で、直接process.env.BASE_を書きます。URLでいいです。例えば、私たちのaxiosプロファイルにprocess.env.BASE_を使います。URL

あるいはあなたが任意のページでconsolie.logs(process.env.BASE_)URL）全部プリントできます。
これ以降は、異なるパッケージコマンドを実行するだけで自動的にBASE_を設定することができます。URLとNODE_ENVです。頻繁なコメントとコメントをキャンセルして、スマートにあなたのif...elseを削除します。baseUrlのファイルを設定してください。
以上のnuxt.jsサービスエリアでのaxiosとproxyエージェントの配置操作は、小編集が皆さんに提供しているすべての内容を共有しています。