今回はNuxtで作成したファイルを静的ファイルへ書き出す方法について紹介を行います。
プロジェクトを作成したけど、サーバーに上げるときはどうすればいいか分からない方などは本記事は約に立つと思います。
環境とバージョンについて
- mac OS 11.2.3
- エディタ VSCode
- node v14.8.0
https://nodejs.org/ja/ - npm 6.14.7
https://www.npmjs.com/>
コンパイルの方法
まずはpackage.jsonファイルを確認しましょう。
確認すると下記の項目があるかと思います。
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "npm run lint:js"
},
上記のスクリプトの中にあるものが、npm のコマンドが記載されている部分です。
静的ファイルの書き出しについては下記コマンド
npm run generate
書き出しが終わると、/ dist の中に書き出しがされます。
distに書き出されたものをサーバーなどに上げればOKページが表示されます。
また、デフォルトではhtmlファイルの中にcssの記述があります。
ファイルを別で書き出したい場合は、別途プラグインが必要となります。
コマンドの設定
nuxt.config.jsにコマンドが表示されていない場合は、
"generate": "nuxt generate",
上記の記述を追加してみてください。
コマンドが使えるようになります。
最後に
バージョンや環境によってやり方が少し違ったりするので、バージョンなどは最新にしてからやるのがおすすめです。
Nuxtでページの作成をするのにおすすめなプラグインなども紹介していきますので気になる方はチェックしてみてください。
コメント