Vue.js初心者がよく間違えるvue/cliの使い方と解決方法の解説

vue/cliの間違った使い方

フレームワークにVue.jsを使用する人が以前に比べ増えたが、それに伴いvue/cliで間違った使い方をしている人も見かけるようになった。

この記事ではVue.js初心者の方がvue/cli使用時に間違えやすい使い方と解決方法について解説する。

※ Node.js (npm) をインストールしていない場合はこちらでインストール

vue/cliのインストール方法

vue/cliはnpm install -g @vue/cliでインストールする。インストール手順が記載されたWebページを見ていてコマンドをコピー&ペーストすれば間違えることはないが、間違えて@を付け忘れてインストールできないケースがある。

npm install -g @vue/cli

# 上記でインストールできない場合はsudoが必要
sudo npm install -g @vue/cli

vue/cliのバージョンの確認方法

「vue -V」でvue/cliのバージョンを確認できる。

vue -vや@vue/cli -Vなどでは確認できないので注意。

# バージョン確認のコマンド
vue -V

# 以下のコマンドではバージョン確認できない
vue -v

@vue/cli -V

vue/cli -V

vue-cli -V

Vueのプロジェクト作成

バージョンを確認できたらインストールされているので、vue create my-projectでプロジェクト作成してnpm run serveでhttp://localhost:8080/で確認できるようにする。

vue create my-project
cd my-project && npm run serve

npm run buildでビルドする

作成したプロジェクトをサーバーにアップする場合はnpm run buildでビルドする。

ビルドを実行するとdistディレクトリが生成されて、その中にHTML,CSS,JSなどのファイルが書き出される。

npm run build

npm run buildでビルドしたファイルのCSSやJSなどのパスはルートになっている。

そのため、ルート以外にファイルをアップしても動作しない。

<!-- index.htmlのソースコードがこのようになっていいる -->
<link href=/css/app.fb0c6e1c.css rel=preload as=style>

ルートではないhttps://iwb.jp/s/vue-foo/のディレクトリ内にビルドしたdistディレクトリ内のファイルを入れてみた。

ChromeのConsoleで確認すると404が表示されているのがわかる。

Failed to load resource: the server responded with a status of 404 (Not Found)

https://iwb.jp/s/vue-foo/

相対パスおよび絶対パスの修正

ファイルを正しく読み込むにはルート(package.jsonがあるディレクトリ)にvue.config.jsというファイルを作成してCSSやJSなどのパスが相対パスまたはルートを基準としない絶対パスになるようにする。

相対パスの場合はvue.config.jsに下記のように'./'をpublicPathを記述する。

たまにbaseUrlが必要と説明しているWebサイトがあるが、古い書き方なのでbaseUrlではパスを変更できない。

// 絶対パスにしたいなら /s/vue-foo/
module.exports = {
  publicPath: './'
}

上記のvue.config.jsがある状態でnpm run buildを実行するとパスが./cssのように相対パスになっているためファイルが404にならず読み込める。

<!-- index.htmlのソースコードがこのようになっていいる -->
<link href=./css/app.fb0c6e1c.css rel=preload as=style>

相対パスで読み込んでいるサンプル

ディレクトリをdistではなくvue-barでビルド

npm run buildを実行するとビルドした内容はdistディレクトリでビルドされるが別名で生成することもできる。

やり方はpackage.json内の"build": "vue-cli-service build" に下記のように--dest [ディレクトリ名]を追加してビルドするだけだ。

// package.json
"build": "vue-cli-service build",
↓
"build": "vue-cli-service build --dest vue-bar",