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

最新推荐文章于 2024-04-19 11:21:44 发布
最新推荐文章于 2024-04-19 11:21:44 发布
阅读量1k 收藏 20
点赞数 19
分类专栏： 前端 文章标签： nuxt3 SSG 静态资源 服务端渲染 图片加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsjweiyi/article/details/137933293
版权

在上一篇记录了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).href
    const img8 = new URL("/assets/logo8.jpg", import.meta.url).href
    const img9 = new URL("~/assets/logo9.jpg", import.meta.url).href
    const 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中

资源路径可以在template和script中直接一纯字符串的形式写，不要用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文件，能做到统一！！！！

lsjweiyi
关注
  • 19
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
nuxt打包路劲问题_nuxt静态部署打包相对路径操作_vue.js
weixin_40004502的博客
11-06 1527
以往在nuxt项目中，打包静态化部署的的文件如下：路径为绝对路径，当项目的域名为二级域名的时候，就不能打包为这绝对路径了。nuxt不同于vue项目，思索了许久，终于找到了配置的地方：nuxt项目中 ： module.exports = { router: { base: './' } }打包后的文件：补充知识：nginx部署，nuxt静态部署，路由跳转失效的问题nuxt静态部...
nuxt-winston-log:Nuxt模块，用于使用Winston记录SSR错误
05-01
nuxt-winston-log 向您的Nuxt应用程序添加winston / logging的模块。 该模块仅支持以通用模式运行的Nuxt应用程序。 默认情况下，捕获以下事件： error级别：通过Nuxt中间件挂钩的SSR错误 info级别：Nuxt应用程序...
Nuxt3动态导入图片(本地) src
weixin_46965237的博客
11-24 2161
Nuxt3动态导入本地的图片，地址错误，图片无法显示
Nuxt v-bind绑定img src不显示的解决
01-21
问题： 使用v-for循环， :src=”item.url”，绑定图片无法显示，只能写成静态结构； 原因： 直接写成静态的，会经过webpack进行编译，从而得到打包后正确的图片真实路径。 如果你写成动态的，webpack就不会进行编译，原封不动的把’~/assets/img/home.png’ 放到你图片的src里面，’http://xxx.xxx.xxx/~/assets/i…’不存在这张图片！ 解决方法1： 把图片存在服务器，使用网络路径， 解决方法2： 使用require和相对路径引用图片 { src: require(../static/gzEducation/fl/1.
nuxt部署的路径问题
关中刀客在青岛
10-24 4675
这里是一个通过 npx create-nuxt-app生成的SPA单页面应用，要部署成一个静态项目，先用命令打包 nuxt generate 但dist目录下直接生成的项目跑不起来，js等资源用了绝对路径而找不到，原因是路由输出默认的绝对路径。 要在nuxt.config.js里添加router的base为“./”； 如果这时打包发现引用的js找到了，但首页却找不到了，经多次尝试，把ro...
nuxt3配置打包静态资源在某一路径下
qq_41154522的博客
04-07 733
nuxt3配置打包静态资源在某一路径下。而不是根目录
【Nuxt3】nuxt3目录文件详情描述：.nuxt、.output、assets、public、utils（一）
qq_2511276124的博客
01-16 1839
这次详细说下.nuxt、.output、assets、public、utils五个文件夹的用处。
nuxt.js 打包相对路径，js 执行
qq_32486011的博客
04-20 846
首先说下怎么打包相对路径，这是网上大部分人的配置，一般情况下应该没啥猫病。 nuxt.config.js router: { base: './', }, 但是这样配置在我这里，会导致 mounted 等js 不执行。 配置成这样也可以，js可以执行 router: { base: '/xxx-xxxx', }, ...
在Nuxt.js中添加PostCSS自动前缀器
最新发布
Vinca@的博客
04-19 348
是一个 PostCSS 插件，用于将浏览器前缀添加到您的 CSS 中，因此您不必在每次更新带有前缀的 CSS 属性时都添加前缀，尤其是对于浏览器兼容性，您真的很担心它。在其他浏览器中，有些 CSS 属性需要带有前缀。如-webkit- | -o- | -ms- 等等。检查属性后，差异将显示在 CSS 上。以下是 PostCSS autoprefixer 添加到您的项目的方法。更新您的 ：package.json。
nuxt generate生成的静态网页如何打开
m0_57236802的博客
12-07 1501
使用命令生成的静态网页可以通过几种不同的方式进行查看和部署。这些静态文件默认位于项目的dist/目录中。
nuxt-relative-dir:Nuxt 进行 generate 之后，将路径替换成相对路径并生成新的文件目录
05-02
为什么需要 为我们提供了基于的服务端渲染，并且能使用 nuxt generate 生成静态页面; 生成的静态页面都是使用的绝对路径来访问的资源，如果要进行 Hybrid app 开发或者使用 Cordova 打包成APP资源就访问不到了; 因此，才有这个插件;将 Nuxt 生成的静态页面内的资源文件路径替换成相对路径; 如何使用 安装: $ npm install nuxt-relative-dir OR yarn add nuxt-relative-dir 使用: 修改项目的 package.json 文件，添加 scripts { "scripts": { "build": "nuxt build && backpack build", "generate": "nuxt generate", "nrd": "nuxt-rd" } } 执行 nuxt-r
nuxt静态部署打包相对路径操作
01-22
以往在nuxt项目中，打包静态化部署的的文件如下： 路径为绝对路径，当项目的域名为二级域名的时候，就不能打包为这绝对路径了。 nuxt不同于vue项目，思索了许久，终于找到了配置的地方： nuxt项目中 nuxt.config.js...
nuxt-image-extractor:Nuxt图像提取器，用于全静态生成的站点
04-29
图像提取器 Nuxt图像提取器，用于全静态生成的站点该模块基于。 它解析每个生成的页面，从CMS API下载其图像，将其存储在/dist内的文件夹中，最后用本地路径替换HTML源。 与nuxt generate和nuxt export命令一起使用...
vite：:high_voltage:使用Nuxt 2的Vite体验:test_tube:
03-04
:test_tube: Vite模式是实验性的，许多nuxt模块仍然不兼容。 如果您发现错误，请以最少的复制量报告。 :high_voltage: 快速开始 安装nuxt-vite ：（需要nuxt> = 2.15.0） yarn add --dev nuxt-vite # OR npm i -D ...
Nuxt3项目中的问题汇总-图片未显示
qq_38661597的博客
03-10 2149
nuxt3图片资源未显示。我是需要后台返回的数据来拼接图片路径。结果图片未显示。两个解决下办法，亲测有效。一是使用网络地址，二是将图片放在public下来引入，不要放在assets下，不要放在static下,......
Nuxt3循环渲染图片不显示问题
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
03-15 494
【代码】Nuxt3循环渲染图片不显示问题。
关于nuxt 图片路径问题
yuange
04-13 6700
1 如果是使用的http 路径没有什么问题 2 如果你直接在src 里面使用本地图片，并且是相对路径，那么编译的时候会自动帮你编译成绝对路径 3 如果你使用的是本地图片，并且图片的路径是写在变量里面的，那么编译完成后路径不会被改变， 所以编译过后会中不到图片。 4 查看一下 2 里面的图片被编译后的路径，会发现前面多了一个 /_nuxt, 这个是根目录的意思， 所以如果你使用本地...
nuxt3 图片本地显示，打包后不显示踩坑
rojie0的博客
06-13 1238
1.静态文件根目录为 public，在根目录下新建 img文件夹。
Nuxt3怎么做图片懒加载
09-16
在Nuxt.js中实现图片懒加载的一种常用方法是使用vue-lazyload插件。下面是在Nuxt.js中使用vue-lazyload插件实现图片懒加载的步骤： 1. 首先，安装vue-lazyload插件。可以使用npm或yarn进行安装： ```bash npm install vue-lazyload ``` 或 ```bash yarn add vue-lazyload ``` 2. 在Nuxt.js项目中的`nuxt.config.js`文件中，添加以下配置： ```javascript export default { // ... plugins: [ { src: '~/plugins/vue-lazyload', ssr: false } ], // ... } ``` 3. 在项目根目录下创建`plugins`文件夹，并在该文件夹下创建`vue-lazyload.js`文件。在`vue-lazyload.js`文件中，添加以下代码： ```javascript import Vue from 'vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { // 配置项，可根据需求进行自定义配置 }) ``` 4. 在需要懒加载的图片上，将`src`属性替换为`v-lazy`指令。例如： ```html <template> <div> <img v-lazy="imageSrc" alt="Lazy Loaded Image"> </div> </template> <script> export default { data() { return { imageSrc: 'path/to/image.jpg' } } } </script> ``` 这样就完成了在Nuxt.js中实现图片懒加载的配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lsjweiyi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值