Nuxt 菜鸟入门学习笔记四:静态资源

这篇具有很好参考价值的文章主要介绍了Nuxt 菜鸟入门学习笔记四:静态资源。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


Nuxt 菜鸟入门学习笔记四:静态资源,前端实践,前端基础,Nuxt,SSR,服务端渲染
Nuxt 官网地址: https://nuxt.com/

Nuxt 使用以下两个目录来处理 CSS、fonts 和图片等静态资源:

public 目录

public 目录用作静态资产的公共服务器,可通过应用程序定义的 URL 公开获取。
换言之,就是可以通过应用程序的代码或浏览器通过根 URL / 获取 public 目录中的文件。

public 目录下的内容将原样提供给服务器根目录。

应用:

  • 在应用程序代码中,通过根 URL / 获取 public 目录中的文件:
<template>
  <!-- 在静态 URL /img/nuxt.png 上引用 public/img/ 目录中的图像文件: -->
  <img src="/img/nuxt.png" alt="Discover Nuxt 3" />
</template>
  • 在浏览器中通过根 URL / 获取 public 目录中的文件:

可以在浏览器中地址栏输入 http://localhost:3000/img/nuxt-logo.png 访问 public/img/ 目录中的图像文件。

assets 目录

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

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

在应用程序的代码中,可以使用 ~/assets/ 路径引用 assets/ 目录中的文件。

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

如上例所示,引用一个图像文件,如果构建工具被配置为处理该文件扩展名,该文件就会被处理。

注意: Nuxt 不会通过静态 URL(如/assets/my-file.png)提供 assets/目录下的文件。如果您需要静态 URL,请使用 public/目录。

全局样式导入

要在 Nuxt 组件样式中全局插入语句,可以在 nuxt.config 文件中使用 Vite 选项。
应用代码如下:

  1. 在 assets/scss 目录下创建一个 _colors.scss 文件,来定义页面和组件要统一使用的颜色:
// assets/scss/_colors.scss

$primary: blue;
$secondary: lightblue;
  1. 在 nuxt.config 中进行配置:
// nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/_colors.scss" as *;',
        },
      },
    },
  },
});
  1. 在 Nuxt 页面和组件中使用步骤 1 中定义的颜色:
// pages/about.vue

<template>
  <div>
    <h1>@ about page</h1>
    <AppAlert>AppAlert Component.</AppAlert>
    <div>
      <p class="primary-text">public 目录下的图片:</p>
      <img src="/img/avatar.jpg" style="height: 80px" />
    </div>
    <div>
      <p class="second-text">assets 目录下的图片:</p>
      <img src="~/assets/img/avatar.jpg" style="height: 80px" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.primary-text {
  // 此处使用全局样式
  color: $primary;
}

.second-text {
  // 此处使用全局样式
  color: $secondary;
}
</style>

注意:上面代码要正常运行,需要安装 SCSS 预处理器,安装命令为 pnpm add sass

至于更多在 Nuxt 中样式设计和使用,将会在下个章节会做进一步详细介绍。文章来源地址https://www.toymoban.com/news/detail-682061.html

到了这里,关于Nuxt 菜鸟入门学习笔记四:静态资源的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 补充前端访问静态资源的一个错误

    注意,前端访问时带上本地服务端的host,例如http://localhost:8080, 后端改写的代码如下,注意file后面一定是三个‘/’,不然的化虽然能解析,但访问不到。 错误来源https://mp.csdn.net/mp_blog/creation/editor/135489062 错误内容已改正。 

    2024年01月21日
    浏览(64)
  • Golang快速入门到实践学习笔记

    Go程序设计的一些规则 Go之所以会那么简洁,是因为它有一些默认的行为: 大写字母开头的变量是可导出的,也就是其它包可以读取 的,是公用变量;小写字母开头的就是不可导出的,是私有变量。 大写字母开头的函数也是一样,相当于class 中的带public的公有函数;

    2024年02月20日
    浏览(55)
  • vue项目 前端加前缀(包括页面及静态资源)

    具体步骤 (1)更改router模式,添加前缀 位置:router文件夹下面的index.js (2)实现静态文件加前缀 位置:vue.config.js 静态资源css,js之类的的src或href引用位置会加上这个前缀,会体现在打包后的index.html文件内容 例如 (3)nignx配置

    2024年02月04日
    浏览(55)
  • 若依框架前端静态资源到后端访问

    修改ruoyi-ui中的.env.production(二选一) 修改ruoyi-ui中的router/index.js,设置mode属性为hash 打包前端静态资源文件。 修改后端resources中的application.yml,添加thymeleaf模板引擎配置 修改后端pom.xml,增加thymeleaf模板引擎依赖 修改后端ResourcesConfig.java中的 addResourceHandlers,添加静态资源映

    2024年02月06日
    浏览(63)
  • 《Python编程从入门到实践》学习笔记03列表

    [‘trek’, ‘cannondale’, ‘redline’, ‘specialized’] trek cannondale redline specialized specialized redline ada lovelace My first bicycle was a Trek. [‘honda’, ‘yamaha’, ‘suzuki’] [‘ducati’, ‘yamaha’, ‘suzuki’] [‘honda’, ‘yamaha’, ‘suzuki’, ‘ducati’] [‘honda’, ‘yamaha’] [‘honda’, ‘yamaha’, ‘

    2024年02月07日
    浏览(38)
  • 《Python编程从入门到实践》学习笔记05If语句

    Audi BMW Subaru Toyota True False False True ‘Audi’ Hold the anchovices! True This is not the correct answer. True False False True True False True False Marie,you can post a response if you wish. you are old enough to vote! you are old enough to vote! Have you registered to vote yet? Sorry,you are too young to vote Please register to vote as soon as you

    2024年02月07日
    浏览(42)
  • 微前端框架MicroApp入门学习笔记(一)

    1、简介   微前端是一种架构风格,旨在通过将前端应用程序拆分为更小、更可管理的部分,使多个团队能够独立开发、部署和维护这些部分,从而实现前端的可扩展性和可维护性。   MicroApp框架是京东出品的一种用于构建微前端架构的开源框架,旨在帮助开发者更好地

    2024年02月12日
    浏览(41)
  • 后端请求转发与请求重定对于向前端静态资源的加载影响

    虽然在实际开发过程中用的很少,这里记录一下遇到的问题。因为有一次导致前端CSS样式文件无法加载,最后找出BUG的步骤 后端代码 前端代码 前端文件路径 URL变化:127.0.0.1:8080/test/hello 不改变 发现前端样式已经丢失,html加载的css,js和图片资源出现了404:因为转发依靠的是

    2024年02月21日
    浏览(58)
  • python编程从入门到实践(第2版)学习笔记(变量,字符串)

    变量是一种可以赋给值的标签。每一个变量都指向一个相关联的值,下列代码中 message 即为变量,指向的值为“Hello Python world !” 第二行的 print() 函数用于打印输出这个 message 变量所关联的值。 且变量的值是可以修改的,python中只有变量的最新值有效如下列代码。     变量

    2024年02月12日
    浏览(53)
  • 【JavaEE初阶】前端第四节.JavaScript入门学习笔记

    作者简介:大家好,我是未央; 博客首页:未央.303 系列专栏:Java测试开发 每日一句:人的一生,可以有所作为的时机只有一次,那就是现在!!! 前言 一、前置知识  1、JS 和 HTML 和 CSS 之间的关系 1.2 JS 的书写形式 1.2.1 内嵌式 1.2.2 行内式  1.2.3 外部式 1.2.4 扩展 1.2

    2024年02月08日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包