Vue.jsのバージョンを確認する方法!

Vue.js Vue.js

Vue.jsのバージョンを確認する方法について書いています。

Vue.jsのバージョンを確認する

コマンドやファイルを参照して、バージョンを知る方法を書いています。

プロジェクトディレクトリにインストールしたVue.jsのバージョン

基本的にはプロジェクトごとにnpm installでVueをインストールして使っているのではないでしょうか。
この場合にはVue.jsのバージョンを確認するときには、npm listコマンドを使用します。

プロジェクトのディレクトリ配下で、下記のコマンドを使用します。

$ npm list vue

実行すると、下記のようにvue@の後にバージョンが表示されます。

$ npm list vue
/var/www/html/laravel-vue-slack
`-- vue@3.2.19

ここでは3.2.19ですね。

グローバルにインストールしたVue.jsのバージョン

npm install -gでグローバルインストールしたバージョンを調べる場合には、下記のコマンドを使用します。

-gオプションでグローバルインストールのバージョンを見れます。

$ npm list -g vue

実行すると、下記のように表示されました。

npm list -g vue   
/usr/local/lib
├─┬ @vue/cli@4.5.13
│ └── vue@2.6.14
└── vue@2.6.14

ここでは2.6.14でした。

package.jsonを見て確認する

コマンドでバージョンを確認しました。
プロジェクトで使用しているpackage.jsonを参照して確認する方法もあります。

package.jsonを開きます。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14"
    },
    "dependencies": {
        "@vue/compiler-sfc": "^3.2.19",
        "vue": "^3.2.19",
        "vue-loader": "^16.8.1"
    }
}

dependenciesの箇所を確認すると、3.2.19が設定されていることが確認できます。

ファイル読み込みしているVue.jsのバージョンについて

CDNなどを使用して、ファイルからVue.jsを読み込んでいる場合のバージョン確認です。
HTMLでスクリプトを読み込んでいる箇所にバージョンが書いています。

下記の場合は2.6.14です。

<head>
  <meta charset="UTF-8" />
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  <title>vue.js cdn test</title>
</head>

この場合はファイル名になるので、意図的に変えられているかもしれないので注意が必要です。
ブラウザから読み込み先を開いて、確認する方法もあります。

ソースを表示を押して
chormeでソースを表示

リンク先をクリックすると
Vue.jsのバージョン確認のためリンククリック

バージョン情報がファイルの頭に書いていたりします。
Vue.jsのソースからバージョン確認

vue-cliのバージョン確認

vue-cliは、vueを使用したwebサイトのプロジェクトを簡単に立ち上げることができるコマンドです。

vueというコマンドがvue-cliのコマンドです。
下記のように-Vオプションでバージョンを確認できます。

$ vue -V

実行すると、下記のようにバージョンが表示されます。

$ vue -V
@vue/cli 4.5.13

Vue.jsのセマンティックバージョニングについて

Vue.jsでもバージョンの管理についてはセマンティックバージョニングを採用しているようです。
セマンティックバージョニングについては、下記の記事に書いたので参照してみてください。
Laravelで採用されているSemantic Versioningについて
セマンティックバージョニング(SemVer)について、公式のページを見て簡単にまとめてみました。Semantic VersioningについてLaravelはバージョン6からセマンティックバージョニングが採用されています。公式のこの辺りに書...

コメント

タイトルとURLをコピーしました