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

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>

دایرکتوری /assets

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>

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

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

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

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

مثال

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

فایل /assets/_colors.scss :

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

فایل /assets/_colors.sass :

$primary: #49240F
$secondary: #E4A79D

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

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

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

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