Back to Blog Index
Nuxt.js / Vue.jsでの実装方法メモ
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ディレクトリに反映される。
.vueファイルに変更がなくても、distのhtmlファイルは書き換わっていることに注意。
起動方法:
ターミナルで対象のディレクトリにcdした後、npm run dev。http://localhost:3000/ でアクセス。