做企业网站哪家好,网站开发建设挣钱吗,做网站关键词,网页制作实训报告总结在上一篇记录了NUXT进行SSG构建时#xff0c;不仅会构建纯静态的html文件#xff0c;也会构建一堆js文件。而如果网页中有加载静态资源#xff0c;如图片#xff0c;这时就需要注意了#xff0c;不能简单的使用官网说的img src~/assets/img/nuxt.png alt不仅会构建纯静态的html文件也会构建一堆js文件。而如果网页中有加载静态资源如图片这时就需要注意了不能简单的使用官网说的img src~/assets/img/nuxt.png altDiscover Nuxt 3 /这个~的相对路径引入资源在构建的html文件中有问题
演示代码结构
首先我在pages目录下有个index.vue里面只是简单的路由跳转
// pages/index.vue
templateNuxtLink to/page1测试/NuxtLink
/template然后还有个pages.vue编写测试的内容
// pages/page1.vue
templatedivimg srcassets/logo1.jpg /img src/assets/logo2.jpg /img src~/assets/logo3.jpg /img :srcimg4 /img :srcimg5 /img :srcimg6 /img :srcimg7 /img :srcimg8 /img :srcimg9 /img :srcimg10 /img :srcimg11 /img :srcimg12 //div
/template
script langts setupconst 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.jpgconst img11 /assets/logo11.jpgconst 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包裹一下各种格式都能转化成正确的所以建议使用。 可以得出以下结论
直接写在template的路径三种写法都能被正确转化成正确的路径用new URL(XXX, import.meta.url).href包裹的写法也都OK直接字符串的路径nuxt也不会帮忙做转化直接被拼接到根路径上导致没有最外层路径_nuxt/而出错
直接刷新路由
但是如果手动刷新该路由就不那么理想了 失败了后9个script中的可以发现在请求中多了个文档page1其核心内容 div data-v-inspectorpages/page1.vue:2:5img src/_nuxt/assets/logo1.jpg data-v-inspectorpages/page1.vue:3:9img src/_nuxt/assets/logo2.jpg data-v-inspectorpages/page1.vue:4:9img src/_nuxt/assets/logo3.jpg data-v-inspectorpages/page1.vue:5:9img srcfile:///E:/workSpace/web/nuxtTest2/pages/assets/logo4.jpg data-v-inspectorpages/page1.vue:6:9img srcfile:///E:/assets/logo5.jpg data-v-inspectorpages/page1.vue:7:9img srcfile:///E:/workSpace/web/nuxtTest2/pages/~/assets/logo6.jpg data-v-inspectorpages/page1.vue:8:9img srcfile:///E:/workSpace/web/nuxtTest2/pages/assets/logo7.jpg data-v-inspectorpages/page1.vue:9:9img srcfile:///E:/assets/logo8.jpg data-v-inspectorpages/page1.vue:10:9img srcfile:///E:/workSpace/web/nuxtTest2/pages/~/assets/logo9.jpg data-v-inspectorpages/page1.vue:11:9img srcassets/logo10.jpg data-v-inspectorpages/page1.vue:12:9img src/assets/logo11.jpg data-v-inspectorpages/page1.vue:13:9img src~/assets/logo12.jpg data-v-inspectorpages/page1.vue:14:9/div可以看到4、5、6被转化为本地文件路径了所以这里可以确定三件事情
如第三篇所讲的页面的路由跳转加载的是.js文件而直接刷新路由加载的是编译好的静态.html文件构建静态html文件时写在script中的相对路径全部被转化成了file:///开头的本地文件路径写在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-inspectorpages/page1.vue:2:5img src/logo2.jpg data-v-inspectorpages/page1.vue:4:9img srcfile:///E:/workSpace/web/nuxtTest2/pages/logo4.jpg data-v-inspectorpages/page1.vue:6:9img srcfile:///E:/logo5.jpg data-v-inspectorpages/page1.vue:7:9img srcfile:///E:/workSpace/web/nuxtTest2/pages/~/logo6.jpg data-v-inspectorpages/page1.vue:8:9img srcfile:///E:/workSpace/web/nuxtTest2/pages/logo7.jpg data-v-inspectorpages/page1.vue:9:9img srcfile:///E:/logo8.jpg data-v-inspectorpages/page1.vue:10:9img srcfile:///E:/workSpace/web/nuxtTest2/pages/~/logo9.jpg data-v-inspectorpages/page1.vue:11:9img srclogo10.jpg data-v-inspectorpages/page1.vue:12:9img src/logo11.jpg data-v-inspectorpages/page1.vue:13:9img src~/logo12.jpg data-v-inspectorpages/page1.vue:14:9
/div和在assets中有相似的转化所以在public中的写法建议就是直接字符串/logo11.jpg这样引用
PS:强烈建议资源不要直接放在public内而是再建一个子目录。因为构建打包时public内的文件、文件夹会被原样搬到打包好的根目录下导致根目录内一堆图片很乱还不利于写静态资源代理
SSG构建后再运行
资源在assets目录中的情况
当点击跳转链接跳转时 前9个纯静态的直接被转化成base64了已经不是路径了
直接刷新路由 再看转化后的html文件
divimg srcdata:image/jpeg;base64,... img srcdata:image/jpeg;base64,... img srcdata:image/jpeg;base64,... img srcfile:///E:/workSpace/web/nuxtTest2/.nuxt/prerender/assets/logo4.jpgimg srcfile:///E:/assets/logo5.jpgimg srcfile:///E:/workSpace/web/nuxtTest2/.nuxt/prerender/~/assets/logo6.jpgimg srcfile:///E:/workSpace/web/nuxtTest2/.nuxt/prerender/assets/logo7.jpgimg srcfile:///E:/assets/logo8.jpgimg srcfile:///E:/workSpace/web/nuxtTest2/.nuxt/prerender/~/assets/logo9.jpgimg srcassets/logo10.jpgimg src/assets/logo11.jpgimg src~/assets/logo12.jpg
/div资源在public文件夹中的情况
当点击跳转链接跳转时
多了个5和8可以正常
直接刷新路由
和上面直接运行的结果一样
所以服务端渲染和SSG纯静态运行时结果还是有不小区别
总结
静态资源在assets中
资源路径要直接纯字符串写在template中才能通杀
静态资源在public中
资源路径可以在template和script中直接一纯字符串的形式写不要用new URL包裹
我认为nuxt对静态资源的处理仍有缺陷
如果是非纯静态的页面呢
虽然我的主题是SSG但是并不意味着页面就不需要与用户交互了比如需求是网页初始化时有默认的图片然后用户可以手工改变图片比如上传自己的图片
我摸索出来的稳定写法是使用三木运算符做动态切换
templatedivimg :srcimg ? img : /logo1.jpg //div
/template
script langts setupconst img refstring | undefined();
/script然后在script中动态改变图片可以将图片转化成base64赋值给ref对象也可以是一个完整的网络地址
本质上仍然是直接在template中写字符串路径。只有这样才能应对服务端渲染、纯SSG构建、点击跳转路由和手动刷新页面这几种情况
希望nuxt能更智能的处理静态资源路径问题特别是构建的js文件和html文件能做到统一
