前提
- WSL2 on Windows 10 Pro
- ディストリビューション: Ubuntu 20.04
- 環境：nodejs や npm、Vue-CLIはインストール済み
やったこと
$ vue create hoge
# vue-CLI に色々聞かれますが、ここは[Vue 3]を選択しました
$ cd hoge
$ npm run serve
> hoge@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 4327ms 9:32:22 AM
App running at:
- Local: http://localhost:8080/
- Network: http://172.30.250.126:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.問題
この状況で、ホスト側（Windows）のブラウザから http://localhost:8080/ にアクセスすると、
というようになり、アクセスできませんでした。
原因
色々調べてみると、どうやら自分の環境では何らかの理由でポート8080が使えない状況になっているのが原因のようでした。（なぜ8080が使えないのかは不明。他のアプリが使っているのかも？）
解決策
Vue CLIで作成したプロジェクトで起動する開発サーバーのポート番号を変更する | DevelopersIO
Vue CLIで作成したプロジェクトはコマンドで簡単に開発サーバーが起動できます。このときポート番号はデフォルトで8080となっています。今回この起動時のポート番号を変更する機会があったので設定方法を共有します。
dev.classmethod.jp
↑を参考にさせて頂きました。
vue create hoge を実行すると、hogeディレクトリ内に vue.config.js が自動生成されています。
これを下記のように修正します。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
- transpileDependencies: true
+ transpileDependencies: true,
+ devServer: {
+ port: 8888, # ポートはとりあえず適当
+ },
})これを保存して、再度 vue を立ち上げてみました。
$ npm run serve
> hoge@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 4327ms 9:32:22 AM
App running at:
- Local: http://localhost:8888/
- Network: http://172.30.250.126:8888/
Note that the development build is not optimized.
To create a production build, run npm run build.とりあえずポートが8888で起動しているっぽいです。
http://localhost:8888/ にアクセスすると、アクセスできました！
とりあえず備忘録として残しておきます。
コメント