blog
copyright ©
creamu Inc. All Rights Reserved.
art direction & design: Kunitaka Kawashimo
code, interaction & photography: creamu Inc.
category: Technology

Nuxt.js / Vue.jsでの実装方法メモ

Pocket

Nuxt.js / Vue.jsで書く画像ファイルパス

.vueファイル:
require(‘~/assets/img/filename.jpg’)

cssファイル:
background: url(~@/assets/img/filename.jpg);

リンクの書き方

/pages/aboutus/index.vueへのリンク:
<nuxt-link to=”/about/”>about</nuxt-link>

/pages/aboutus/test.vueへのリンク:
<nuxt-link to=”/about/test/”>test</nuxt-link>

ページを増やした場合のNuxt.jsのルーティングの反映

/about.vueなど、ファイルを増やしただけではNuxt.jsのルーティングに反映されないので、ターミナルをcommand + cで切って、もう一度 npm run dev を実行する。

インラインcssにbackgroundで背景画像を指定する場合:
/assetsに置いてあるファイルはbase64にエンコードされ、キャッシュを持たないようで、ファイルパスの指定も難しい。
/staticに置くとキャッシュが効き、「/static/filename.jpg」は「/filename.jpg」で呼び出せる。ただ/static直下に置くと、html生成時にルートにはかれるため、/static/imgにした方がいい。

htmlの生成方法:
npm run generate でdistディレクトリに書き出し。変更や削除があった場合もdistディレクトリに反映される。