画像




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




画像




静的ファイルを生成時には、動的なルーティングは無視されます。採用したい場合は、「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サーバーで確認すると問題なく表示されます。









Q&A