iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0

昨天有人問我引用圖片的路徑問題,答案整理成一篇補充
雖說是圖片(image)、檔案(file)、樣式(css/scss/sass)、js等靜態資源,Nuxt 依其是否需要經 webpack 編譯 (webpacked),分兩個資料夾放:

  • assets: 放需要被編譯 (webpacked) 的檔案
  • static: 不需額外處理的檔案,例如網站icon (favicon.ico)、設定檔 (robots.txtsitemap.xmlCNAME) 等等

檔案照規則放好,引用也有規則要遵守


路徑別名 和 引用方式

路徑別名對應表

記得寫 Vue.js SPA 時,若沒指定別名,import 常寫成多層的相對路徑

import Header from '../components/Header.vue';

或圖片路徑寫成

<img src="../../assets/my-image.png"/>

非常不推薦相對路徑寫法,讓專案維護頭痛、元件不容易重用

通常我們會在 webpack config 指定別名,Nuxt 已規定好別名規則,如下表

別名(ALIAS) 目錄(DIRECTORY)
~ or @ srcDir,原始碼根目錄
~~ or @@ rootDir,專案根目錄

懶人包產生的 Nuxt 專案,srcDir = rootDir

因此,上述壞味道在 Nuxt 可改寫為

import Header from '~/components/Header.vue';
<img src="~/assets/my-image.png"/>

圖片引用

<!-- webpacked image from `assets` directory -->
<img src="~/assets/my-image-2.png"/>

<!-- Static image from `static` directory -->
<img src="~/static/my-image.png"/>

<!-- 在 vue file 以外的檔案(指 document 或 *.html),可以更為簡化 -->
<img src="/my-image.png"/>

在設定檔引用檔案

05 設定全域樣式,載入 assets 下的樣式

css: [
  '@/assets/sass/all.sass'
],

樣式內引用

算是規則例外,小bug
Nuxt 2.0 無法正確解析 css 內的 ~/,因此建議你用 ~@/ 替代

background: url('~assets/my-bg-image.png');
background: url('@/assets/my-bg-image.png');

@import('~assets/css/reset.css');

Nuxt 如何編譯靜態資源?

放在 assets 資料夾下的檔案,引用前先經過 Webpack 編譯
更精確點講「透過 vue-loader 以及副檔名對應的 loader」編譯

  • Vue File 經 vue-loader 拆出 <template><script><style>,交由對應 loader 進一步處理
  • 樣式經過 css-loader
  • 照片、其他檔案經過 file-loaderurl-loader 處理

最終編成 Nuxt 對應格式,官方文件解說得很清楚,這不詳述囉


上一篇
16. Nuxt 全域設定檔 (nuxt.config.js),可以吃嗎?
下一篇
18. Nuxt 運行模式 (Mode) 差在哪?
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32

尚未有邦友留言

立即登入留言