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

Nuxt.jsに非同期通信のパッケージaxiosとproxyをインストールする方法についてです。
Vue.jsやNuxt.jsでは非同期通信にaxiosを使います。

Contents

1 @nuxtjsのインストール
2 @nuxtjs/proxy
3 nuxt.config.jsの変更

@nuxtjsのインストール

axiosのインストールコマンドです。

$ npm i --save @nuxtjs/axios

1	$ npm i --save @nuxtjs/axios

@nuxtjs/proxy

proxyのインストールコマンドです。

$ npm i --save @nuxtjs/proxy

1	$ npm i --save @nuxtjs/proxy

nuxt.config.jsの変更

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) {},
    },
};

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の項目を追加します。

SearchLight