‘Nuxt.js’ タグのついている投稿
Nuxt.js 開発サーバーでのSSEがランダムポートになって困ってた
説明しよう！
- Nuxt.js で開発やってると開発サーバーを使うでしょ？
- プログラム修正したら自動的にビルドしてくれて素敵！
- そして画面を自動リロードしてくれて親切！
なんです。
ところで、Nuxt Screens Module(https://github.com/nuxt/screens)がローディング表示のためにSSE(Server-Sent Events)を使ってまして、最近、使用するポートがランダムになりました。
この変更は開発中のパフォーマンス問題への対策らしいです。良いことです。
しかし特定ポートをフォーワードして開発している人なんかは困ったことになります。
僕とか。
(さらに…)
CORSに@nuxtjs/proxy
Nuxt.js でspaの開発やってたら普通は開発サーバーを使いますよね。
例えばyarnをパッケージマネージャーに採用している場合だと
$ yarn run dev
yarn run v1.21.1
$ nuxt
╭───────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.12.2 │
│ Running in development mode (spa) │
│ │
│ Listening on: http://127.0.0.1:3000/ │
│ │
╰───────────────────────────────────────────────╯
ℹ Preparing project for development 13:54:32
ℹ Initial build may take a while 13:54:32
✔ Builder initialized 13:54:32
✔ Nuxt files generated 13:54:32
✔ Client
Compiled successfully in 25.76s
ℹ Waiting for file changes 13:55:00
ℹ Memory usage: 241 MB (RSS: 451 MB) 13:55:00
ℹ Listening on: http://127.0.0.1:3000/
といった感じ。通常だとポートは3000になります。
サーバー側APIは別のポートで提供することになるので別オリジンになり、そのままだと開発中にAPIアクセスができません。
Nuxt.js 悩み解決の小ネタ集
ここ1ヶ月程Nuxt.js + FirebaseでSPAのシステムを作っていました。
短期構築がご要望でリアルタイム性が求められる内容。Firebaseに向いていると判断、提案したところ技術構成は自由にやらせていただけることになりました。
別件で一昨年末あたりからずっとバックエンドはLaravel、フロントエンドは素のVue.js + Vuex + Vue Routerで開発やってるんですが、PWA化したほうがよさそうだったこともあってNuxt.js(以降Nuxt)使ってみようかなってことで採用。
Nuxt、便利ですね。特にプラグインとミドルウェアが素敵！
Firebase(今回使用したのはAuthentication、Firestore、Hosting、Functions)との相性もバッチリでした。
ですが初めてということもありいろいろと悩んだりもするわけで…
それらをどう解決したか？の小ネタ集です(というか今回の落とし所、かな)
Nuxt.jsのbuild時にconsole.logを削除する
小ネタ集を書いていて分けておいたほうがよさそうだと思ったヤツ、その２。
nuxt buildでproductionビルドするときにconsole.logが削除されると良くないです？
良いですよね？なのでminifyを行うモジュールにはそういう機能が載っているようです。
Nuxt.jsのproduction時にconsole.logを削除する – くらげになりたい。
との情報を見つけました。ありがたい！
ですが、デフォルトのterser-webpack-pluginではなくuglifyjs-webpack-pluginに差し替えて実現されているとのこと。
この情報をもとに調査・実験をすすめたところterserのままでも可能でしたのでnuxt.config.jsのbuildの該当箇所を提示します(“nuxt”: “^2.4.0”)
