質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

3580閲覧

axiosでのbaseURL指定

yamakawa03

総合スコア20

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2018/06/29 01:37

axiosにてAPI呼び出しを行っていますが、環境によって、ソースをいじらず、設定ファイルなので、baseURLを切り替えたいのですが、可能でしょうか?

環境
Laravel, Vue.js, axios

Laravelのapp.jsにて
axios.defaults.baseURL = 'http://developer.com/foo';
を追記すれば変更できるのまでは分かっているのですが、それだと、環境毎にソースのビルドが必要になってくるのであまりやりたくないです。

例えば以下のような呼び出しによるAPIのURLを本番環境とテスト環境で切り替えたい

js

1axios.get('/api/employee').then(res => { 2 this.items = res.data 3})

望む形
本番環境「http://hogehoge.com/api/employee」
テスト環境「http://developer.com/foo/api/employee」

現状ですと、
本番環境「http://hogehoge.com/api/employee」
テスト環境「http://developer.com/api/employee」←サブディレクトがなくなる

テスト環境はサブディレクトリで運用しているため、そのあたりの切り替えたいと思っています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんな感じで環境変数に設定し process.env 経由で読み込めばいいのではないでしょうか?

axios.defaults.baseURL = process.env.API_BASE_URL;

開発中の環境変数設定にはdotenvなどを使うと良いと思います。

投稿2018/06/29 10:24

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamakawa03

2018/06/29 11:03

API_BASE_URLはどのファイルにて値を設定すれば良いのでしょうか? Laravelで使用している「.env」に記載で良いのでしょうか?
退会済みユーザー

退会済みユーザー

2018/06/29 11:32

私はphpに詳しくないのでyamakawa03さんのディレクトリ構成がわかりません。 Laravelの.envファイルをvue側のdotenvが読み込めるならそれでも大丈夫です。 通常は vue アプリケーションのrootディレクトリ直下にvueアプリ用の.envファイルを配置します。 Laravelでは.envを何もせずに読み込めるかもしれませんが、vueは層ではありません。dotenvというnpmパッケージをinstallする必要があります。 環境変数なので別に.env に書かなくてはならないわけではありません。 まずはお使いの環境に直接環境変数を設定して試してみたらどうでしょうか? 期待通りに動いてから.envについて調べても良いと思います。
yamakawa03

2018/06/29 12:33 編集

https://www.npmjs.com/package/dotenv 上記を参考にLaravelプロジェクトへdotenvをインストールしてみました。 npm install dotenv の実行 bootstrap.jsへ「require('dotenv').config()」の追加 npm run dev の実行 しかし、以下のエラー This dependency was not found: * fs in ./node_modules/dotenv/lib/main.js To install it, you can run: npm install --save fs Asset Size Chunks Chunk Names \js\app.js 1.93 MB 0 [emitted] [big] \js\app \css\app.css 181 kB 0 [emitted] \js\app ERROR in ./node_modules/dotenv/lib/main.js Module not found: Error: Can't resolve 'fs' in 'D:\laravel\project\root\node_modules\dotenv\lib' @ ./node_modules/dotenv/lib/main.js 1:11-24 @ ./resources/assets/js/bootstrap.js @ ./resources/assets/js/app.js @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss エラー内容にある「npm install --save fs」を実行 再度「npm run dev」を実行するも変わらず上記のエラー
退会済みユーザー

退会済みユーザー

2018/06/29 12:40

すみません。少し勘違いしていました。axios なのでクライアントサイドで行いたいと言うことですしたね。 クライアントサイドでは環境変数は使用できません。別の案をあらためて別途postします。
退会済みユーザー

退会済みユーザー

2018/06/29 13:00 編集

済みません。dotenvを使用するのは開発環境でなければ不可能です。productionの場合、config/prod.env.js に ```js 'use strict' module.exports = { NODE_ENV: '"production"' API_BASE_URL: '"http://hogehoge.com/"' } ``` こんな感じで書いておけば process.env 経由から取得できると思います。 同様に開発時用の設定は config/dev.env.js に書けばいいでしょう。 ただし、ここに書いてしまうと普通にやるとgitに登録されることになります。 他人の目に触れたらまずい情報(トークンなど)はgitに登録されてもいい値だけを書くか、*.env.jsファイルをgitの管理から外すかする必要があります。
yamakawa03

2018/06/30 02:29

丁寧なご説明ありがとうございました。 こちら解決いたしました。 Laravelにてすでにそのような機能がありました。 https://readouble.com/laravel/5.6/ja/mix.html#environment-variables .envファイルに書き込むことで本番用と開発用に変数を切り替えることができました。 pinzoloさんのおかげでたどり着けました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問