Nuxt.js #005 – 公開用の静的ファイルを生成

公開用の静的ファイルを生成するメモ。

静的ファイルを生成時には、動的なルーティングは無視されます。採用したい場合は、「nuxt.config.js」にルーティングを追加する必要があります。今回は、4つ追加で設定してみます。

nuxt.config.js

const pkg = require('./package');

module.exports = {
    mode: 'spa',

    //動的なルーティングを追加
    generate: {
        routes: [
            '/sample/sample2',
            '/sample10',
            '/sample100',
            '/sample500'
        ]
    },

    /*
    ** Headers of the page
    */
    head: {
        title: pkg.name,
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: pkg.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 modules
    */
    modules: [
        // Doc: https://github.com/nuxt-community/axios-module#usage
        '@nuxtjs/axios',
        // Doc: https://bootstrap-vue.js.org/docs/
        'bootstrap-vue/nuxt'
    ],
    /*
    ** Axios module configuration
    */
    axios: {
        // See https://github.com/nuxt-community/axios-module#options
    },

    /*
    ** Build configuration
    */
    build: {
        /*
        ** You can extend webpack config here
        */
        extend(config, ctx) {

        }
    }
};

静的ファイルを生成。コマンド実行で「dist」ディレクトリが自動作成されます。

npm run generate



「dist」ディレクトリを、webサーバーで確認すると問題なく表示されます。

• 参考文献
  Nuxt.js