AB型技術系 主に備忘録

ほぼプログラム関連の備忘録

Nuxt.js 静的ファイルを出力してみる

出力対象

出力対象

/pages/index.vue

<template>
    <div>
        <ul>
            <li>{{ text }}</li>
            <li>{{ data.data1 }}</li>
            <li>{{ data.data2 }}</li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'IndexPage',
  async asyncData(context) {
        const data = await context.$axios.$get('http://localhost:3000/nuxt_test.json')
        return { data }
    },
  data() {
        return{
            text: "テスト"
        }
    },
}
</script>

/pages/Sample.vue

<template>
    <Sample/>
</template>

/components/sample.vue

<template>
  <div><b>サンプル</b></div>
</template>

/pages/sub/subsample.vue

<template>
    <b>サブディレクトリサンプル</b>
</template>

出力コマンドを実行

npm run generate

※ データ(nuxt_test.json)取得のためサーバーを起動しないとエラーが発生。

出力結果

/dist/index.html

/dist/index.html
<!DOCTYPE html><html lang="ja"><head>
    <title>サンプル</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content=""><meta name="format-detection" content="telephone=no"><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/_nuxt/679b7a7.js" as="script"><link rel="preload" href="/_nuxt/4cdfbd1.js" as="script"><link rel="preload" href="/_nuxt/43f5c2c.js" as="script"><link rel="preload" href="/_nuxt/3a451ff.js" as="script"><style>.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style>
  </head>
  <body>
    <div id="__nuxt"><!----><div id="__layout"><div><ul><li>テスト</li> <li>データ1</li> <li>データ2</li></ul></div></div></div>
</body></html>

/dist/sample/index.html

/dist/sample/index.html
<!DOCTYPE html><html lang="ja"><head>
    <title>サンプル</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content=""><meta name="format-detection" content="telephone=no"><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/_nuxt/679b7a7.js" as="script"><link rel="preload" href="/_nuxt/4cdfbd1.js" as="script"><link rel="preload" href="/_nuxt/43f5c2c.js" as="script"><link rel="preload" href="/_nuxt/9908c56.js" as="script"><style>.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style>
  </head>
  <body>
    <div id="__nuxt"><!----><div id="__layout"><div><b>サンプル</b></div></div></div>
  

</body></html>

/dist/sub/subsample/index.html

/dist/sub/subsample/index.html
<!DOCTYPE html><html lang="ja"><head>
    <title>サンプル</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content=""><meta name="format-detection" content="telephone=no"><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/_nuxt/679b7a7.js" as="script"><link rel="preload" href="/_nuxt/4cdfbd1.js" as="script"><link rel="preload" href="/_nuxt/43f5c2c.js" as="script"><link rel="preload" href="/_nuxt/21c14d6.js" as="script"><style>.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style>
  </head>
  <body>
    <div id="__nuxt"><!----><div id="__layout"><b>サブディレクトリサンプル</b></div></div>
  

</body></html>

想定通り静的ファイルが出力できました。
これでローカル環境で各種データを取得して静的ファイルを出力する環境ができました。