nuxt3使用记录四:加载静态资源时路径的写法研究

2024-04-19 01:52

本文主要是介绍nuxt3使用记录四:加载静态资源时路径的写法研究,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在上一篇记录了NUXT进行SSG构建时,不仅会构建纯静态的html文件,也会构建一堆js文件。而如果网页中有加载静态资源,如图片,这时就需要注意了,不能简单的使用官网说的<img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />这个~的相对路径引入资源在构建的html文件中有问题

演示代码结构

首先,我在pages目录下有个index.vue,里面只是简单的路由跳转

// pages/index.vue
<template><NuxtLink to="/page1">测试</NuxtLink>
</template>

然后还有个pages.vue编写测试的内容:

// pages/page1.vue
<template><div><img src="assets/logo1.jpg" /><img src="/assets/logo2.jpg" /><img src="~/assets/logo3.jpg" /><img :src="img4" /><img :src="img5" /><img :src="img6" /><img :src="img7" /><img :src="img8" /><img :src="img9" /><img :src="img10" /><img :src="img11" /><img :src="img12" /></div>
</template>
<script lang="ts" setup>const img4 = ref(new URL("assets/logo4.jpg", import.meta.url).href);const img5 = ref(new URL("/assets/logo5.jpg", import.meta.url).href);const img6 = ref(new URL("~/assets/logo6.jpg", import.meta.url).href);const img7 = new URL("assets/logo7.jpg", import.meta.url).hrefconst img8 = new URL("/assets/logo8.jpg", import.meta.url).hrefconst img9 = new URL("~/assets/logo9.jpg", import.meta.url).hrefconst img10 = "assets/logo10.jpg"const img11 = "/assets/logo11.jpg"const img12 = "~/assets/logo12.jpg"
</script>

直接运行代码,相当于服务端渲染

资源在assets目录中的情况

当点击跳转链接跳转时:

在这里插入图片描述
前9张图片加载成功,它们的加载路径都是形如:http://localhost:3000/_nuxt/assets/logo1.jpg // 相应图片对应相应数字
而后3张失败,看看他们被转化成的路径:

GET http://localhost:3000/assets/logo10.jpg 404 (Page not found: /assets/logo10.jpg)
GET http://localhost:3000/assets/logo11.jpg 404 (Page not found: /assets/logo11.jpg)
GET http://localhost:3000/~/assets/logo12.jpg 503 (Service Unavailable)

我找了下他的加载资源里,有个page1.vue的文件,这个文件就和构建时编译成js文件是一样的。里面有转成上述路径的代码,这里的转化我认为都是合理的,用new URL("XXX", import.meta.url).href包裹一下,各种格式都能转化成正确的,所以建议使用。
可以得出以下结论

  1. 直接写在template的路径,三种写法都能被正确转化成正确的路径
  2. new URL("XXX", import.meta.url).href包裹的写法也都OK
  3. 直接字符串的路径,nuxt也不会帮忙做转化,直接被拼接到根路径上,导致没有最外层路径_nuxt/而出错
直接刷新路由

但是,如果手动刷新该路由,就不那么理想了
在这里插入图片描述
失败了后9个script中的,可以发现在请求中多了个文档page1,其核心内容:

 <div data-v-inspector="pages/page1.vue:2:5"><img src="/_nuxt/assets/logo1.jpg" data-v-inspector="pages/page1.vue:3:9"><img src="/_nuxt/assets/logo2.jpg" data-v-inspector="pages/page1.vue:4:9"><img src="/_nuxt/assets/logo3.jpg" data-v-inspector="pages/page1.vue:5:9"><img src="file:///E:/workSpace/web/nuxtTest2/pages/assets/logo4.jpg" data-v-inspector="pages/page1.vue:6:9"><img src="file:///E:/assets/logo5.jpg" data-v-inspector="pages/page1.vue:7:9"><img src="file:///E:/workSpace/web/nuxtTest2/pages/~/assets/logo6.jpg" data-v-inspector="pages/page1.vue:8:9"><img src="file:///E:/workSpace/web/nuxtTest2/pages/assets/logo7.jpg" data-v-inspector="pages/page1.vue:9:9"><img src="file:///E:/assets/logo8.jpg" data-v-inspector="pages/page1.vue:10:9"><img src="file:///E:/workSpace/web/nuxtTest2/pages/~/assets/logo9.jpg" data-v-inspector="pages/page1.vue:11:9"><img src="assets/logo10.jpg" data-v-inspector="pages/page1.vue:12:9"><img src="/assets/logo11.jpg" data-v-inspector="pages/page1.vue:13:9"><img src="~/assets/logo12.jpg" data-v-inspector="pages/page1.vue:14:9"></div>

可以看到,4、5、6被转化为本地文件路径了!所以这里可以确定三件事情:

  1. 如第三篇所讲的,页面的路由跳转加载的是.js文件,而直接刷新路由加载的是编译好的静态.html文件
  2. 构建静态html文件时,写在script中的相对路径全部被转化成了file:///开头的本地文件路径
  3. 写在script中纯字符串,依然不会做任何处理

资源在public文件夹中的情况

根据官方文档,public相当于项目的根目录,可直接引用资源。上面page1.vue的路径,去掉assets/就是public的引用形式,其他不变,接着测试:

然后第一步就报错了,编译是logo1和3的写法直接不该通过,所以直接去掉了。

点击路由跳转的方式

在这里插入图片描述

看,只有3个能加载成功,其余失败的被转化成如下路径

GET http://localhost:3000/_nuxt/pages/logo7.jpg 503 (Service Unavailable)
GET http://localhost:3000/_nuxt/@fs/logo8.jpg 503 (Service Unavailable)
GET http://localhost:3000/_nuxt/logo9.jpg 503 (Service Unavailable)
GET http://localhost:3000/~/logo12.jpg 503 (Service Unavailable)
GET http://localhost:3000/_nuxt/pages/logo4.jpg 404 (Page not found: /_nuxt/pages/logo4.jpg)
GET http://localhost:3000/_nuxt/logo6.jpg 404 (Page not found: /_nuxt/logo6.jpg)
GET http://localhost:3000/_nuxt/@fs/logo5.jpg 404 (Page not found: /_nuxt/@fs/logo5.jpg)

加载成功的路径是:http://localhost:3000/logo1.jpg

官网也介绍了,public中的资源会被放在根目录下,所以正确的加载方式是不要~,直接使用\开头即可引用。

所以,public中的资源文件,不要用new URL("XXX", import.meta.url).href包裹,直接纯字符串且像根目录文件一样引用

手动刷新路由

在这里插入图片描述

<div data-v-inspector="pages/page1.vue:2:5"><img src="/logo2.jpg" data-v-inspector="pages/page1.vue:4:9"><img src="file:///E:/workSpace/web/nuxtTest2/pages/logo4.jpg" data-v-inspector="pages/page1.vue:6:9"><img src="file:///E:/logo5.jpg" data-v-inspector="pages/page1.vue:7:9"><img src="file:///E:/workSpace/web/nuxtTest2/pages/~/logo6.jpg" data-v-inspector="pages/page1.vue:8:9"><img src="file:///E:/workSpace/web/nuxtTest2/pages/logo7.jpg" data-v-inspector="pages/page1.vue:9:9"><img src="file:///E:/logo8.jpg" data-v-inspector="pages/page1.vue:10:9"><img src="file:///E:/workSpace/web/nuxtTest2/pages/~/logo9.jpg" data-v-inspector="pages/page1.vue:11:9"><img src="logo10.jpg" data-v-inspector="pages/page1.vue:12:9"><img src="/logo11.jpg" data-v-inspector="pages/page1.vue:13:9"><img src="~/logo12.jpg" data-v-inspector="pages/page1.vue:14:9">
</div>

和在assets中有相似的转化,所以在public中的写法建议就是直接字符串"/logo11.jpg"这样引用

PS:强烈建议资源不要直接放在public内,而是再建一个子目录。因为构建打包时public内的文件、文件夹会被原样搬到打包好的根目录下,导致根目录内一堆图片,很乱,还不利于写静态资源代理

SSG构建后再运行

资源在assets目录中的情况

当点击跳转链接跳转时

在这里插入图片描述
前9个纯静态的,直接被转化成base64了,已经不是路径了

直接刷新路由

在这里插入图片描述
再看转化后的html文件:

<div><img src="data:image/jpeg;base64,... >	<img src="data:image/jpeg;base64,... >	<img src="data:image/jpeg;base64,... >	<img src="file:///E:/workSpace/web/nuxtTest2/.nuxt/prerender/assets/logo4.jpg"><img src="file:///E:/assets/logo5.jpg"><img src="file:///E:/workSpace/web/nuxtTest2/.nuxt/prerender/~/assets/logo6.jpg"><img src="file:///E:/workSpace/web/nuxtTest2/.nuxt/prerender/assets/logo7.jpg"><img src="file:///E:/assets/logo8.jpg"><img src="file:///E:/workSpace/web/nuxtTest2/.nuxt/prerender/~/assets/logo9.jpg"><img src="assets/logo10.jpg"><img src="/assets/logo11.jpg"><img src="~/assets/logo12.jpg">
</div>

资源在public文件夹中的情况

当点击跳转链接跳转时

多了个5和8可以正常
在这里插入图片描述

直接刷新路由

和上面直接运行的结果一样:
在这里插入图片描述

所以,服务端渲染和SSG纯静态运行时,结果还是有不小区别

总结

静态资源在assets中

资源路径要直接纯字符串写在template中,才能通杀

静态资源在public中

资源路径可以在templatescript中直接一纯字符串的形式写,不要用new URL包裹

我认为nuxt对静态资源的处理,仍有缺陷!

如果是非纯静态的页面呢?

虽然我的主题是SSG,但是并不意味着页面就不需要与用户交互了,比如需求是:网页初始化时有默认的图片,然后用户可以手工改变图片,比如上传自己的图片

我摸索出来的稳定写法是使用三木运算符做动态切换:

<template><div><img :src="img ? img : '/logo1.jpg'" /></div>
</template>
<script lang="ts" setup>const img = ref<string | undefined>();
</script>

然后在script中动态改变图片,可以将图片转化成base64赋值给ref对象,也可以是一个完整的网络地址

本质上仍然是直接在template中写字符串路径。只有这样,才能应对服务端渲染纯SSG构建点击跳转路由手动刷新页面这几种情况!

希望nuxt能更智能的处理静态资源路径问题,特别是构建的js文件和html文件,能做到统一!!!!

这篇关于nuxt3使用记录四:加载静态资源时路径的写法研究的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/916350

相关文章

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

hdu2544(单源最短路径)

模板题: //题意:求1到n的最短路径,模板题#include<iostream>#include<algorithm>#include<cstring>#include<stack>#include<queue>#include<set>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#i

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

poj 1734 (floyd求最小环并打印路径)

题意: 求图中的一个最小环,并打印路径。 解析: ans 保存最小环长度。 一直wa,最后终于找到原因,inf开太大爆掉了。。。 虽然0x3f3f3f3f用memset好用,但是还是有局限性。 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#incl

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库:创建新文件夹,进入文件夹目录,执行指令 git init ,用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的