nuxt generateで生成した静的ファイルをhttp-serverでホスティングする #nuxtjs

Nuxt.jsには静的ファイルの生成がサポートされており、成果物を静的ファイルとしてホスティングできるようになる。

開発中など、この静的ファイルをNuxt.jsに依存させないで確認したいときに、http-serverを使うと便利。

vue-cliから作成したNuxtプロジェクトであれば、package.json にscriptが記載されていると思う。

{
  "scripts": {
    "generate": "nuxt generate",
  },

なので、これを実行するだけ。

$ npm run generate

そうすると dist/ 配下に静的ファイルが生成される。

しかしこのままだとHTMLから参照しているJSファイルのパス等が /_nuxt/pages/index.5a196feafb5f24fea7d5.js のようになっており気軽には確認できない。
（ブラウザ等でそのままファイルとして開いてもJSが404になってしまったり）

http-serverを使うと、簡単にホスティングできそう。

npmで開発用にインストール

$ npm install http-server --save-dev

scriptを　package.json に追記

{
  "scripts": {
    "start-static": "http-server ./dist"
  },

起動する。

$ npm run start-static

ポート等はオプションで差し替えたりできるみたい。

プロジェクト内（npm)で完結したかったのでhttp-serverを使ったけど、ただ静的ファイルをホスティングするだけならphpコマンドが簡単だと教わった。

$ php -S localhost:8000 -t dist/