web-dev-qa-db-ja.com

プロダクション用にvue.config.jsでAPIパスを設定する方法は？

vue cli3 for setupを使用しています。すでにdevServer apiをvue.config.jsファイル：

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:1888/apps/test/mainapp.php/',
            changeOrigin: true,
        },
    },
}

また、パス ' https：//server/myapp/main.php/ 'を本番APIパスとして設定する必要がありますが、- ドキュメントに情報が見つからないようです それを行う方法について。どんな助けでもありがたいです。

コードで私がやっていることの簡単な例：

methods: {
    login() {
        this.axios.post('/api/test')
            .then((resp) => {
                console.log(resp);
            })
            .catch(() => {
                console.log('err:' , err);
            });
    },
},
webpackvue.jsvue-cli
6
ierdna

yarn/npm run buildを実行しても、devServerは実行されません。提供されるのは、変換されたJavaScriptのみです。 .envファイルのURLを変更する必要があります。

開発：

.env

VUE_APP_API_ENDPOINT = '/api'

製造：

.env.production

VUE_APP_API_ENDPOINT ='https://server/myapp/main.php'

次に、axiosなどのリクエストを行うときに、XHRリクエストライブラリでこれらの環境変数を使用する必要があります。

axios[method](process.env.VUE_APP_API_ENDPOINT, data)

methodはGET/POST/PUT/DELETEになります。

Cross-Origin-Resource-Sharingによって設定されたルールに制限されることに注意してください。サーバーがVue.jsページを提供するURLを許可していない場合は、それを開く必要があります。

.envが/apiに送信されたxhrリクエストを宣言するため、devServer構成を変更する必要はありません。

4
Ohgodwhy

コードでaxiosを使用しているため、次のことを試すことができます。

// service.js
import axios from 'axios';
axios.defaults.baseURL = 'https://server/myapp/main.php/';
export default axios;

// main.js
Vue.prototype.$axios = axios;

// In your component
login() {
    this.$axios.post('/api/test', data)
        .then((resp) => {
            console.log(resp);
        })
        .catch(() => {
            console.log('err:' , err);
        });
}

次に、すべてのリクエストは、設定したデフォルトのbaseUrlで送信されます。

axios のその他のオプションを確認してください

1
billychan