馆陶网站建设价格,网站建设汇报方案ppt,咨询公司logo,火狐显示网站开发你好同学#xff0c;我是沐爸#xff0c;欢迎点赞、收藏、评论和关注。
Nuxt 为资源存放提供两种选择。可以使用两个目录#xff08;public/assets#xff09;来处理样式表、字体或图像等资源。
public/ 此目录中的文件将按原样复制到服务器根目录中。assets/ 此目录中的…你好同学我是沐爸欢迎点赞、收藏、评论和关注。
Nuxt 为资源存放提供两种选择。可以使用两个目录public/assets来处理样式表、字体或图像等资源。
public/ 此目录中的文件将按原样复制到服务器根目录中。assets/ 此目录中的文件将使用构建工具Vite 或 webpack进行处理。
public
位置位于项目的根目录下通常与 pages、components 等目录并列。用途用于存放完全静态的资源如图片、字体、JS 文件这些文件不会通过 webpack 处理、.html 文件等。这些资源将直接映射到项目的根 URL 下。访问方式可以直接通过 /资源名 的形式访问 public 目录下的资源而无需经过 webpack 处理。注意public 目录下的资源是静态的不会进行打包、压缩等 webpack 处理使用时需要自行考虑资源优化和缓存问题。
例如引用 public/ 目录中的文件public/img/nuxt.png
app.vue
templateimg src/img/nuxt.png altDiscover Nuxt 3 /
/template浏览器中直接访问http://localhost:3000/img/nuxt.png
assets
位置在 Nuxt3 中assets 目录的位置也是位于根目录与 pages、components 等目录并列。用途用于存放需要在构建过程中被 webpack 处理的资源如 Vue 组件中的样式文件CSS、SCSS、Less 等、图片等。这些资源可以通过 webpack 的 loader 进行转换和压缩优化前端资源。访问方式可以通过 ~/assets/ 访问 assets 目录下的资源以确保它们能被 webpack 正确处理。注意点因为 assets 目录下的资源会经过 webpack 处理所以可以利用 webpack 的各种 loader 和插件进行资源优化。
app.vue
templateimg src~/assets/img/nuxt2.png altDiscover Nuxt 3 /
/template注意不能在浏览器中直接访问 assets 中的静态资源 如 http://localhost:3000/img/nuxt2.png。
全局导入样式
要在 Nuxt 组件样式中全局插入语句可以使用 Vite 选项在 nuxt.config 文件中进行配置。以定义 scss 变量为例
第 1 步安装依赖 sass
npm install sass第 2 步定义变量 assets/_colors.scss
$primary: blue;
$secondary: red;第 3 步全局注册 nuxt.config.js
export default defineNuxtConfig({vite: {css: {preprocessorOptions: {scss: {additionalData: use ~/assets/_colors.scss as *;,},},},},
});第 4 步组件使用 app.vue
templatediv classwrapimg src~/assets/img/nuxt2.png altDiscover Nuxt 3 /pHello Nuxt3/p/div
/templatestyle langscss.wrap {display: flex;justify-content: center;align-items: center;color: $primary;}
/style好了分享结束谢谢点赞下期再见
