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>
出力結果
/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
<!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
<!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>
想定通り静的ファイルが出力できました。
これでローカル環境で各種データを取得して静的ファイルを出力する環境ができました。