Nuxt快速学习开发 - Nuxt3静态资源Assets

Nuxt 使用两个目录来处理样式表、字体或图像等资产。

public/目录内容按原样在服务器根目录中提供。

assets/目录包含您希望构建工具(Vite 或 webpack)处理的所有资产。

public/目录

public目录用作静态资产的公共服务器,可在您的应用程序定义的URL上公开访问。

public/您可以从您的应用程序代码或通过根 URL 从浏览器中获取目录中的文件/。

例如,引用public/img/目录中的图像文件,可在静态 URL 获得/img/nuxt.png:

复制代码
//app.vue
<template>
  <img src="/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

assets/目录

Nuxt 使用Vite或webpack来构建和捆绑您的应用程序。这些构建工具的主要功能是处理 JavaScript 文件,但它们可以通过插件(对于 Vite)或加载器(对于 webpack)进行扩展,以处理其他类型的资产,如样式表、字体或 SVG。此步骤主要出于性能或缓存目的(例如样式表缩小或浏览器缓存失效)转换原始文件。

Nuxt 使用该assets/目录来存储这些文件,但该目录没有自动扫描功能,可以为它使用任何其他名称。

例如,如果构建工具配置为处理此文件扩展名,则引用将被处理的图像文件:

复制代码
//app.vue
<template>
  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

可以通过配置nuxt.config.ts配置别名,以便更好的访问资源,例:

复制代码
//``nuxt.config.ts
export default defineNuxtConfig({
  alias: {
    //配置别名
    images: fileURLToPath(new URL("./assets/img", import.meta.url)),
    style: fileURLToPath(new URL("./assets/style", import.meta.url)),
    data: fileURLToPath(new URL("./assets/other", import.meta.url)),
  },
 )}

//app.vue
<template> <div> <img src="~/img/nuxt.png" /> </div> </template>

全局样式导入

要在 Nuxt 组件样式中全局插入语句,需要再nuxt.config.ts中配置vite选项 资产/_colors.scss资产/_colors.sass

assets/_colors.scss

复制代码
$primary: #49240F;
$secondary: #E4A79D;

//``nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        sass: {
         additionalData: '@use "@/assets/_colors.scss" as *;'
        }
      }
    }
  }
})
相关推荐
头疼的程序员2 分钟前
MySQL学习之触发器
学习·mysql
ThreeYear_s1 小时前
基于FPGA的PID算法学习———实现PI比例控制算法
学习·算法·fpga开发
银色的白3 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
新中地GIS开发老师4 小时前
三维GIS开发cesium智慧地铁教程(4)城市白模加载与样式控制
学习·arcgis·智慧城市·webgl·gis开发·webgis·地理信息科学
Studying 开龙wu5 小时前
机器学习监督学习实战五:六种算法对声呐回波信号进行分类
学习·算法·机器学习
软件开发技术深度爱好者5 小时前
HTML版英语学习系统
学习·html
nenchoumi31195 小时前
UE5 学习系列(二)用户操作界面及介绍
windows·学习·ue5·机器人
NULL指向我5 小时前
香橙派3B学习笔记9:Linux基础gcc/g++编译__C/C++中动态链接库(.so)的编译与使用
笔记·学习
ThreeYear_s6 小时前
基于FPGA的PID算法学习———实现PID比例控制算法
学习·算法·fpga开发
_李小白7 小时前
【OSG学习笔记】Day 18: 碰撞检测与物理交互
笔记·学习·游戏·3d