web-dev-qa-db-ja.com

nuxtでaxios baseUrlを取得する方法は？

Nuxt.jsプロジェクトにaxiosモジュールがあります。
baseUrl（API用）もlocalhost:4040/apiクライアントがポート3000で実行されている間。
APIで画像データを取得すると、 '/ upload/1.png'のようなAPIサーバーへの相対パスが返されます
{ "src":"/upload/1.png" }

だから、axios baseUrlを取得し、それを連結して画像へのフルパスを作成する必要があります。
ハードコーディング以外の方法はありますか？

vue.jsaxiosnuxt.js
6
Terry Djony

nuxt.config.jsで定義した場合：

axios: {
  baseURL:"localhost:4040/api/"
}

イメージに対して行う必要があるのは、次のようにポイントすることだけです。

:src="`${$axios.defaults.baseURL}upload/1.png`"
9
Begueradj

このようなaxios設定にアクセスして、APIベースURLを取得できます。

this.$axios.defaults.baseURL
6
jibe

同様の問題がありました。私の解決手順は次のとおりです。フォルダー.nuxtを削除+ブラウザーチェンジャーでキャッシュを削除

  axios: {
     baseURL: 'http: // localhost: 8080/api'
   }

期待どおりに動作します。その前に、コミュニティチュートリアルのような多くの方法を試しましたが、効果的ではありませんでした。

1
Tran Hoang Hiep

誰かがaxios baseURLをドメイン非依存にする方法を知りたい場合：

これを簡単に実現できます。

axios: {
  baseURL: '/'
}

localhost:3000/apiおよびany-domain.com/api

0
Erick Aky

誰かがaxiosを呼び出すつもりなら、dispatch store/index.js経由で呼び出します

   export const actions = {
     // nuxt server Init only works on store/index.js
     async nuxtServerInit ({dispatch}) {
         let response = await dispatch ('member / list', {page: 1});
         console.log (response);
       }
}

モジュールファイルmember.js

   async list ({commit}, payload) {
         return await this. $ axios. $ post ('/ user / list', payload) .then ((response) => {
             commit ('fetchSuccess', response);
             return response;
             })
             .catch (error => {
                 return error.response.data;
             });
     },

axios apiを含むnuxt.config.js構成ファイル

 axios: {
    baseURL: 'http://localhost:9020/api'
  },

答えが適切ではない場合は申し訳ありませんが、誰かがこれがそれらを説明することを期待する必要がある場合

0
Tran Hoang Hiep

axiosのベースURLを設定できます

axios.defaults.baseURL = ' https://api.example.com/ ';

次回、このURLにAPIを呼び出すために必要なパスが追加されます

詳細については、下のリンクから見ることができます

https://github.com/axios/axios

0
Md Mahamudul Hasan