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

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

@nuxtjsのインストール

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

$ npm i --save @nuxtjs/axios

@nuxtjs/proxy

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

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

modulesにaxiosの設定を追加、新しくaxiosとproxyの項目を追加します。



Author: webmaster