Github.io部署nuxt.js生成的静态文件404问题解决方法

最新推荐文章于 2024-08-05 09:59:45 发布
最新推荐文章于 2024-08-05 09:59:45 发布
阅读量3.2k 收藏 2
点赞数 1
文章标签： github.io nuxt.js 404 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yagizacd/article/details/110921654
版权
本文介绍了在将Nuxt.js项目部署到Github.io后遇到的404错误问题。问题表现为_nuxt/*.js等静态文件无法访问。作者推测原因是特殊文件名触发了Github.io的限制。解决方法包括使用Node.js重命名_nuxt文件夹为其他名称，同时更新nuxt.config.js和package.json的相关配置。详细代码和部署示例已提供。
摘要由CSDN通过智能技术生成

现象

使用Nuxt.js开发的个人页面，部署到Github.io后，_nuxt/*.js等静态问题不能访问，提示404错误。

在这里插入图片描述
js文件实际上市存在的

在这里插入图片描述

原因推测

nuxt generate后的文件名(_nuxt/*.js)比较特殊，触发了Github.io的 content-security-policy，所以被禁止访问。

在这里插入图片描述

解决方法

使用Node.js修改nuxt generate 后的文件夹名称。把_nuxt 改成 static 之类的。

同时nuxt.config.js也做相应的修改。

nuxt.config.js

{
最低0.47元/天 解锁文章
Capricorncd
关注
Vue在 Nuxt.js 中重定向 404 页面的方法
10-17
主要介绍了Vue在 Nuxt.js 中重定向 404 页面的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Nuxt.js 静态资源和打包
热门推荐
zjsfdx的博客
08-31 1万+
直接引入图片 我们在网上任意下载一个图片，放到项目中的static文件夹下面，然后可以使用下面的引入方法进行引用。 <div <img src="~static/logo.png"></div>...
nuxt.js跳转路由没问题，刷新后404,NuxtLink跳转刷新后404
qbbhgn的博客
09-15 1829
在Nuxt.js中，当你使用路由跳转到某个页面后，刷新页面可能会导致404错误的问题。这是因为Nuxt.js默认使用了服务器端渲染（SSR），而刷新页面时，服务器无法正确地处理路由请求。
nuxtjs使用Nginx反向代理访问_nuxt目录静态资源404的问题
hoyche的博客
02-19 2831
要把Nginx配置中的静态资源的规则全部去掉
nuxt: generate打包后访问资源404问题
qq_40358970的博客
05-25 953
generate打包后访问资源404问题，/_nuxt/*.js、/_nuxt/*.css等静态问题不能访问，提示404错误。使用Nuxt.js开发的个人页面，部署到。此时在nginx配置 /nuxt 代理。而我们的这些资源文件是存在的。加上此处代码进行上下文配置。到此就能解决404问题了。
nuxt 动态路由打包报多个404
yangzixiansheng的博客
11-22 1706
前提是之前打包设置打包成功的。也就是设置了promise，之后新增了store初始化的请求 我之前是从store初始化，请求到数据之后，就在页面直接拿state数据渲染。 简单的banner图没问题，但是类似详情这种，既要进行动态路由请求，又要初始化渲染数据 对于nuxt初始化理解，也算不够深刻。 我先是初始化，单个id循环请求完所有的详情数据，放入数组。 在页面进行查找某个id ,然后再找到id对应的详情数据 ，进行渲染 结果就是打包报多个404，以及打包停止（不报错）。 解决办法 在页面 async a
.nuxt框架开发pc 配置404页面
weixin_50678132的博客
09-23 1698
.nuxt框架开发pc 配置404页面 layouts 这个文件是框架自带的，可以直接创建一个子文件名字为error 具体错误内容自己定 <template> <div class="col-md-6 align-self-center"> <h1>404</h1> <h2>UH OH! 页面丢失</h2> <p>您所寻找的页面不存在。你可以点击下面的按钮，返回主页。
解决Nuxt 执行generate静态化后 文件路径错误导致404，CSS无效，JS不执行的等问题...
weixin_34383618的博客
08-06 6846
因项目需要，本人需部署静态文件到阿里云服务器上，执行nuxt generate后，产生的index.html打开之后一堆404，原因就是router没有配置。 nuxt.config.js里 需要如下配置 router:{ base:"/" //此为根目录，如果有具体目录需求按实际情况写 } ...
nuxt 404
qq_36632604的博客
07-15 1054
nuxt各种调试404 name值不存在 原来写错了
yamanoku.github.io:奥土大山作品集网站
04-18
在【压缩包子文件的文件名称列表】中，"yamanoku.github.io-nuxt"表明项目的核心代码和资源与Nuxt.js有关，这可能包括Nuxt配置文件、Vue组件、页面、样式表、图片、脚本和其他必要的静态资源。Nuxt.js通过结构化目录...
sainthnayr.github.io
05-07
9. **GitHub Pages部署**：项目名称后缀`.github.io`表明网站可能托管在GitHub Pages上，这是一个免费的静态站点托管服务。 10. **版本控制与协作**：使用Git进行版本控制，通过GitHub进行代码托管和协同开发，方便...
diskii.github.io：个人网页
02-23
- 最后，将生成的静态文件推送到GitHub仓库的`gh-pages`分支，即可通过 "diskii.github.io" 的URL访问。 8. **响应式设计**：个人网页通常会考虑跨平台兼容性和响应式设计，确保在不同设备和屏幕尺寸上都能良好...
sen0rxol0.github.io:个人网站
04-29
此项目使用了静态网站生成器Nuxt.js，这是一种基于Vue.js的框架，能够将动态内容转化为静态HTML、CSS和JavaScript文件，提高了网站的加载速度和SEO优化。 【Nuxt.js】 Nuxt.js是一个为Vue.js应用提供服务端渲染...
nuxt.js 打包部署及刷新页面404问题解决
weixin_43560347的博客
12-19 7325
nuxt.js 打包部署及刷新页面404问题解决 一.打包 npm run generate 将生成的dist文件部署服务器上 二.刷新404终极解决办法 1.在nuxt.config.js文件中添加 base为文件路径地址 router:{ base:'/dist' } 2.在打包的dist目录下创建 .htaccess 文件 dist 为地址的根目录 <IfModule ...
static下的资源访问不到，报404
cxycxytony的博客
12-09 1762
如果遇到静态资源404，那么首先肯定时路径问题，但是，当我们修改路径之后，发现还是404，可能是我们改的有问题，检查一篇，发现路径确确实实没问题，那么可能就是缓存捣的鬼了，首先我们需要把项目中的maven进行clear， 然后ctrl+F5刷新一下我们的浏览器，再展开，我们会发现页面已经好了！ ...
Nuxt - [高效简洁] 路由不存在时，跳转到自己定制的 404.vue 页面（当路由不存在时自动重定向到自定义的 404 组件）路由配置的解决方案
王佳斌
11-17 3528
nuxt当路由不存在时怎么跳转到404页面，nuxt.js实现路由不存在时跳转到自己做的404页面，NUXT.JS实现当网页链接不存在后，自定跳转重定向到404，nuxt.js 跳转 404，nuxt.js写项目时增加错误提示页面操作，页面重新加载后,Nuxt动态路由返回404 ，nuxtjs 不存在路由重定向至404页面，Vue在Nuxt.js中重定向404页面的方法，nuxt.js 页面404怎么做，Vue在 Nuxt.js 中重定向 404 页面的方法，【NuxtJs】不存在路由重定向至404页面，如
【Nuxt】404 页面 和 嵌套路由
最新发布
小秀的博客
08-05 494
router.params 也可以获取动态参数 slug，为一个数组，比如上面的 [‘about’, ‘fdsf’, ‘fdsfs’, ‘fsdfsfsdf’, ‘…此时包含三个页面组件：/about, /about/about-fdsfsdf, /about/fdsf/fdsfs/fsdfsfsdf/…尽管它被称为“错误页面”，但它不是一个路由，不应该放在 ~/pages 目录中。具体 404 路由页面可以写成某个路径下的 404，也可以直接写在 pages 下，作为根目录的 404。
nuxt3动态路由打包后404解决方法
qq_38049231的博客
05-08 923
本地环境npm run dev启动一切正常，build发布后动态页面404，目录结构如下。解决方法：在nuxt.config.ts文件中添加动态路由配置，包含所有的动态路由。注意：/pc/是整个项目的基础路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值