目次
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)
相対パスおよび絶対パスの修正
ファイルを正しく読み込むにはルート(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",