[Nuxt] axiosとproxyのインストール

Nuxt.jsに非同期通信のパッケージaxiosとproxyをインストールする方法についてです。
Vue.jsやNuxt.jsでは非同期通信にaxiosを使います。
@nuxtjsのインストール
axiosのインストールコマンドです。
1 |
$ npm i --save @nuxtjs/axios |
@nuxtjs/proxy
proxyのインストールコマンドです。
1 |
$ npm i --save @nuxtjs/proxy |
nuxt.config.jsの変更
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
export default { server: { port: 3000, // デフォルト: 3000 host: "xxx.xxx.xxx.xxx", // デフォルト: localhost }, srcDir: __dirname + "/client", mode: "universal", /* ** Headers of the page */ head: { title: process.env.npm_package_name || "", meta: [ { charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1", }, { hid: "description", name: "description", content: process.env.npm_package_description || "", }, ], link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }], }, /* ** Customize the progress-bar color */ loading: { color: "#fff" }, /* ** Global CSS */ css: [], /* ** Plugins to load before mounting the App */ plugins: [], /* ** Nuxt.js dev-modules */ buildModules: [], /* ** Nuxt.js modules */ modules: ["@nuxtjs/axios"], axios: { proxy: true, prefix: "/api", }, proxy: { "/api": "http://xxx.xxx.xxx.xxx:3000/", }, /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend(config, ctx) {}, }, }; |
modulesにaxiosの設定を追加、新しくaxiosとproxyの項目を追加します。
関連記事
- [Vue.js] npm ERR! @ development: `cross-env エラー
- [Vue.js] Vue-CLIの使い方
- [Nuxt] インストール
- [Nuxt] axiosでAPIのデータを取得し表示する方法
- [Python] CentOS7へのインストール