nuxt无法找到static里面的静态资源原因

最新推荐文章于 2025-03-26 14:43:15 发布
最新推荐文章于 2025-03-26 14:43:15 发布
阅读量2.5k 收藏
点赞数
文章标签： vue.js html javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40765395/article/details/109469355
版权

nuxt无法找到static里面的静态资源原因

因为项目需要，把旧vue项目移植过来。然后按照教程在nuxt创建了src文件夹，原因就在这里。因为设置了srcDir的初始目录。所以找不到src外面的文件夹。

解决：不要把旧项目文件夹都放到src里面。按照创建项目时候的文件夹位置来
在这里插入图片描述

暗得是蛋
关注
nuxt打包路劲问题_nuxt静态部署打包相对路径操作_vue.js
weixin_40004502的博客
11-06 1896
以往在nuxt项目中，打包静态化部署的的文件如下：路径为绝对路径，当项目的域名为二级域名的时候，就不能打包为这绝对路径了。nuxt不同于vue项目，思索了许久，终于找到了配置的地方：nuxt项目中 ： module.exports = { router: { base: './' } }打包后的文件：补充知识：nginx部署，nuxt静态部署，路由跳转失效的问题nuxt静态部...
Nuxt 框架静态站点生成（SSG)（六）
qq_35876316的博客
06-27 1315
当你运行 nuxt generate 命令时，Nuxt 会调用 asyncData 方法来获取数据，并为每篇文章生成一个静态 HTML 文件。生成的静态文件会放在 dist/ 目录下。首先，你需要在项目的 nuxt.config.js 文件中设置 target 为 ‘static’，这告诉 Nuxt 你打算生成一个静态网站。你可以创建一个动态路由来捕获这个 ID，并为每篇文章生成一个静态页面。这个命令会触发静态站点的生成过程，Nuxt 会读取你的动态路由，并为每个可能的路由生成一个静态 HTML 文件。
Nuxt.js引用static或者assets目录下资源
彭世瑜的博客
04-26 3079
Nuxt 服务器启动后，会将static文件目录映射到根路径/下。 所以想引用static目录下图片，直接写法如下（可行） <img src="/log.png"/> 引用assets目录下文件，写法如下（没测试成功） <img src="~/assets/logo.png"/> 参考 nuxt引用static或者assets目录下资源注意事项 ...
Storyblok Nuxt 项目使用教程
最新发布
gitblog_00175的博客
03-26 396
Storyblok Nuxt 项目使用教程 storyblok-nuxt Storyblok Nuxt.js module 项目地址: https://gitcode.com/gh_mirrors/st/storyblok-nux...
nuxt build后static文件夹丢失
topc2000的博客
10-20 1733
场景 根据nuxt的官方文档，运行起来的时候会把static映射到 / 路劲下。我是用的是 npm run start方式部署的王章。即本地运行npm run build。之后得到.nuxt的文件夹。直接上传到服务器后使用 pm2 start npm --run start 解决方案 直接把static 文件拷贝到与.nuxt的同级目录即可 参考文档 nuxt文档地址 ...
nuxt中static里面放入图片不出来
关中刀客在青岛
10-27 6916
查看了static和assets的区别后，决定将图片们放在static下。但路径是在JS中生成的，结果没有显示出来，浏览器标签中后面跟个括号，里面写1x1px，经过尝试也了解到很多知识点： js中拼路径时表示根路径的动态参数@和~不能正常解析； 即使根据logo等图片地址的规律，在前面加上“_nuxt/”,仍然访问不到； 后来查得： 如果你的静态资源文件需要 Webpack 做构建编译处...
nuxt.js中的静态图片显示不出来解决方法
weixin_38644630的博客
03-05 3110
nuxt.js中的静态图片显示不出来解决方法 <script> export default { data() { return { imgList: [ { name: "图1", url: require("../static/banner1.png") }, { name: "图2", url: require("../static/banner2.png") }, { name: "图3", url: requir
分享：nuxt静态文件
awseda的博客
06-14 1641
静态文件 如果你的静态资源文件需要 Webpack 做构建编译处理，可以放到 assets 目录，否则可以放到 static 目录中去。 Nuxt 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下，像 robots.txt 或 sitemap.xml 这种类型的文件就很适合放到 static 目录中。 你可以在代码中使用根路径 / 结合资源相对路径来引用静态资源： <!-- 引用 static 目录下的图片 --> <img src="/my-image.png"/>
nuxt静态部署打包相对路径操作
01-22
以往在nuxt项目中，打包静态化部署的的文件如下： 路径为绝对路径，当项目的域名为二级域名的时候，就不能打包为这绝对路径了。 nuxt不同于vue项目，思索了许久，终于找到了配置的地方： nuxt项目中 nuxt.config.js...
nuxt-static-render:适用于SSR的Nuxt模块，无需补水有效载荷
04-27
静态渲染 Nuxt的一定的代价：嵌入式__NUXT__有效负载。 如果可以在服务器上呈现一些标记而不在客户端上添加标记，该怎么办？ 您将获得一个无效组件：无法在客户端进行以下数据更新后正确更新（重新渲染）。 更糟糕...
tours-nuxt-full-static:一个使用@nuxtcontent和@ nuxtjscolour-mode在Nuxt中实现完全静态的演示旅行博客应用程序
05-14
全静态应用 我的hunky-dory Nuxt.js项目 构建设置 # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn run dev # build for production and launch server $ yarn run build...
Vue打包后访问静态资源路径问题
10-16
在开发Vue应用时，我们经常会遇到一个问题：在执行`npm run build`打包后，静态资源（如图片、字体文件）的路径无法正确加载。这个问题主要出现在将应用部署到服务器后，因为打包后的Vue项目结构与开发环境有所不同...
nuxt: generate打包后访问资源404问题
qq_40358970的博客
05-25 1585
generate打包后访问资源404问题，/_nuxt/*.js、/_nuxt/*.css等静态问题不能访问，提示404错误。使用Nuxt.js开发的个人页面，部署到。此时在nginx配置 /nuxt 代理。而我们的这些资源文件是存在的。加上此处代码进行上下文配置。到此就能解决404问题了。
Nuxt3 遇到的问题(未解决)
Florenza的博客
08-19 1244
这种写法在正常运行时没问题,但是打包后找不到文件。刷新页面时会有部分样式加载不出来。
【3】项目目录结构
青崖梦
11-14 213
目录结构 Nuxt.js 的默认应用目录架构提供了良好的代码分层结构，适用于开发或大或小的应用。 当然，你也可以根据自己的偏好组织应用代码。 观看有关Vue School上Nuxt.js目录结构的免费课程 目录 资源目录 资源目录assets用于组织未编译的静态资源如LESS、SASS或JavaScript。 关于 assets 目录的更多信息 组件目录 组...
day2021-12-13(Nuxt.js路由)
TIM_Zhang1122的博客
12-13 889
4 路由 4.1 路由概述 Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。 要在页面之间切换路由，我们建议使用<nuxt-link> 标签。 标签名 描述 <nuxt-link> nuxt.js中切换路由 <Nuxt /> nuxt.js的路由视图 <router-link> vue默认切换路由 <router-view/> vue默认路由视图 4.2 基础路由 自动
Nuxt中一些常见的图片资源不显示问题
weixin_48150129的博客
03-10 4254
我在刚开始实习的时候的第一个任务就是通过nuxt制作企业官网。一步步走来踩了很多坑，其中图片资源不显示的问题真的出现了好多次。如果你也是初学者，希望这篇博文能帮到你！
Nuxt 常见问题与解决方案
Lisunlight的博客
09-08 4256
nuxt常见问题，环境搭建，使用技巧
Nuxt3项目常用配置解析
weixin_43939281的博客
06-12 9127
关于nuxt3几点项目问题
nuxt3 部署之后静态资源加载过慢
12-27
### 如何优化 Nuxt3 部署后的静态资源加载速度 #### 使用CDN加速静态资源访问 为了提高静态资源的加载速度，可以考虑将`static`目录中的文件托管到内容分发网络(CDN)[^1]。通过这种方式，用户可以从离自己最近的节点获取所需资源，减少延迟时间。 #### 启用Gzip/Brotli压缩 配置Web服务器启用Gzip或Brotli算法来压缩响应体数据，在不影响用户体验的前提下显著减小传输的数据量。这一步骤通常是在部署环境下的HTTP服务端完成设置[^2]。 #### 设置缓存策略 合理规划浏览器缓存机制能够有效降低重复请求次数并加快页面展示效率。具体做法包括但不限于为不同类型的静态资产指定较长的有效期以及利用ETag特性实现条件性GET请求[^3]。 ```bash # .htaccess 文件片段 (适用于Apache服务器) <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType text/css "access plus 1 week" ExpiresByType application/pdf "access plus 1 month" ExpiresByType application/javascript "access plus 1 week" </IfModule> <ifModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/xml text/css application/x-javascript application/javascript </ifModule> ``` #### 图片懒加载技术 对于图片类资源而言，采用懒加载(lazy loading)模式可以在滚动条到达相应位置之前不立即下载这些图像，从而节省带宽并提升首屏渲染性能。 ```html <img src="placeholder.jpg" data-src="real-image.jpg" class="lazyload"/> <!-- 结合JavaScript库如lazysizes --> <script async="" src="//cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.0/lazysizes.min.js"></script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值