Help us understand the problem. What is going on with this article?

vue-cli-plugin-express でポート番号を指定してサーバーを起動する

vue-cli 3.x プラグインの vue-cli-plugin-express にて、ポート番号を指定してサーバーを起動する際に詰まったので備忘録として。

この記事は vue のプロジェクトに vue add express でプラグインを追加した状態から進めていきます。

解決方法

package.json"scripts" 内にある "express" または "express:run" の値の末尾に --port [任意のポート番号] を付け加えることで、ポート番号を指定してのサーバー起動に成功しました。

package.json
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "express": "vue-cli-service express:watch --port 3001",
    "express:run": "vue-cli-service express:run --port 3001"
  }
> npm run express

> test@0.1.0 express (プロジェクトのパス)
> vue-cli-service express:watch --port 3001

 DONE  Wed Feb 12 2020 23:22:41 GMT+0900 (GMT+09:00) 

  ♻️  Server running at:
    - Local:   http://localhost:3001/
    - Network: http://192.168.0.100:3001/


  ⚙  You're in development mode. to start the application, run npm run serve.

  �🎉 Fallback to this server enabled: you can use relative routes in your cod

  �🔀 No api routes found (yet?).

解決前に試したこと

プラグイン導入時に生成される ./srv/index.js 内に app.listen(port, () => {}) の形で書いてもポート番号が反映されず、プラグインの README.md にポート番号の指定について書かれていなかったのでしばらく悩みました。

node_modules の中を直に弄るのもなぁと思いながらファイルを漁ってみたところ、それっぽいことが書いてあるファイルが見つかりました。
vue-cli-plugin-express/src/config.js (GitHub)

この時点でなんとなく指定方法がわかったのですが、何かの出力では…?と思い、 npm run express を実行したときに呼び出される vue-cli-service express:watch に対して、 --help をつけて呼び出してみたところ、それらが出力されました。

> npx vue-cli-service express:watch --help

  Usage: vue-cli-service express:watch [options]

  Options:

    --delay   delays run by a small duration (default: false)
    --host    specify host (default: 0.0.0.0)
    --port    specify port (default: 3000)
    --https   use https (default: false)

  For more info, see https://github.com/mathieutu/vue-cli-plugin-express

今後はちゃんと --help を使っていこうと思いました…。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした