دایرکتوری assets در ناکست

Nuxt برای لود فونت‌ها و تصاویر از دو دایرکتوری استفاده می‌کند، یکی دایرکتوری public و دیگری دایرکتوری assets است. دایرکتوری assets دارای قابلیت اسکن خودکار نیست و مسیر ثابتی ندارد و در کد نویسی خود برای دسترسی به فایل‌های درون این دایرکتوری باید از مسیر /assets/ استفاده کنید. این دایرکتوری اکثرا برای فایل‌هایی که پروژه شما به آن‌ها نیاز دارد مانند Vite و Webpack استفاده می‌شود.

زمان مطالعه: 3 دقیقه

بازدید: 948

پرسش و پاسخ: 0

فهرست مطالب برای مطالعه

Nuxt از دو دایرکتوری برای هندل کردن فایل‌هایی مانند فایل‌های CSS، فونت‌ها و image ها استفاده می‌کند.

دایرکتوری /public که در پوشه root پروژه Nuxt ما قرار دارد.
دایرکتوری /assets که در آن فایل‌هایی برای پردازش ساخت پروژه شما نیاز به آن دارد مانند webpack و vite که این هم در دایرکتوری root پروژه است.

دایرکتوری /public در ناکست

دایرکتوری /public برای قراردادن فایل‌هایی ثابتی است که در یک URL تعریف شده‌اند و در دسترس عموم قرار دارند.

برای استفاده یک فایل در دایرکتوری /public در کدهای برنامه خود یا URLتان، می‌توانید با مسیر root پروژه و دایرکتوری و یا فایل مورد نظر به آن دسترسی پیدا کنید.

به عنوان مثال، در زیر میخواهیم با ایجاد یک رفرنس به یک تصویر در دایرکتوری /public/img/ با نام nuxt.png دسترسی پیدا کنیم.

<template>
  <img src="/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

یک تصویر در دایرکتوری /public/img/

دایرکتوری /assets در nuxt

Nuxt از Vite و یا Webpack برای بسته بندی و ساخت اپلیکیشن شما استفاده می‌کند. وظیفه اصلی این ابزارها ساخت و پردازش فایل‌های جاوااسکریپت است، اما می‌توان آن‌ها را ازطیق پلاگین‌ها (برای Vite) یا لودرها (برای Webpack) برای پردازش سایر assetها نیز گسترش داد، مانند فایل‌های Stylesheet، فونت‌ها و فایل‌های SVG. در این مرحله عمدتا فایل اصلی را برای عملکرد بهتر و ذخیره سازی، بهینه می‌کنند(مانند کوچک کردن سایز فایل‌های Stylesheet و یا پاک کردن حافظه Cache مرورگر).

طبق قرارداد، Nuxt از دایرکتوری /assets برای ذخیره این فایل‌ها استفاده می‌کند اما هیچ قابلیت اسکن خودکار برای این دایرکتوری وجود ندارد و می‌توانید از هر نام دیگری برای آن استفاده کنید.

در کد برنامه خود می‌توانید با استفاده از مسیر /assets/ به فایل‌هایی که در این دایرکتوری قرار دارند دسترسی پیدا کنید.

در این مثال، ما به یک فایل تصویری در دایرکتوری /assets دسترسی پیدا کره‌ایم.

<template>
  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

یک فایل تصویری در دایرکتوری /assets

نکته: Nuxt فایل‌هایی را که در دایرکتوری /assets قرار دارند را در یک URL ثابت مانند /assets/my-file.png ارائه نمی‌کند. اگر شما به یک URL ثابت نیاز دارید از دایرکتوری /public استفاده کنید.

یک آموزش کاربردی برای بازار کار : آموزش لاراول

Import کردن استایل‌های عمومی در nuxt

برای واد کردن استایل‌هایی که در کل برنامه به آن‌ها دسترسی داشته باشید، می‌توانید از vite استفاده کنید، در زیر با یک مثال آن را به شما نشان داده‌ایم.

در این مثال ما یک فایل جزئی sass داریم که حاوی چند متغیرcolor است که قرار است در صفحات و کامپوننت‌های پروژه Nuxt ما در دسترس باشد.

فایل /assets/_colors.scss :

$primary: #49240F;
$secondary: #E4A79D;

فایل /assets/_colors.scss

فایل /assets/_colors.sass :

$primary: #49240F
$secondary: #E4A79D

فایل /assets/_colors.sass

فایل nuxt.config برای scss:

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/_colors.scss" as *;'
        }
      }    }
  }
})

فایل nuxt.config برای scss

بیشتر بدانیم: فونت‌ آنلاین

فایل nuxt.config برای scss:

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        sass: {
          additionalData: '@use "@/assets/_colors.sass" as *\n'
        }
      }
    }
  }
})

فایل nuxt.config برای scss