开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Nginx显示404，但vue-cli提供路由

。

首先，Nginx是一个高性能的开源Web服务器，也可以用作反向代理服务器和负载均衡器。它可以处理静态文件和动态内容，并提供了强大的配置选项。

当Nginx显示404错误时，这意味着请求的资源未找到。这可能是由于以下几个原因：

路由配置错误：在使用vue-cli创建的Vue.js项目中，路由配置是通过Vue Router来管理的。如果路由配置错误，Nginx可能无法正确地路由到请求的页面，导致404错误。需要检查Vue Router的配置文件（通常是router/index.js）是否正确定义了路由路径和对应的组件。
Nginx配置错误：Nginx的配置文件（通常是nginx.conf）可能存在问题，导致无法正确处理Vue.js的路由请求。需要确保Nginx的配置文件中正确地配置了代理或重定向规则，以将请求正确地转发给Vue.js应用。
静态文件路径错误：Vue.js应用在构建时会生成一些静态文件，如HTML、CSS和JavaScript文件。这些文件需要由Nginx正确地提供给客户端。如果Nginx的配置中指定的静态文件路径不正确，可能导致404错误。需要检查Nginx配置文件中的静态文件路径是否正确。

针对以上问题，可以采取以下解决方案：

检查Vue Router的配置文件，确保路由路径和组件的定义正确无误。
检查Nginx的配置文件，确保代理或重定向规则正确配置，以正确地转发Vue.js的路由请求。
检查Nginx配置文件中的静态文件路径，确保路径正确指向Vue.js应用生成的静态文件。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云服务器（CVM）：提供高性能、可扩展的云服务器实例，可用于部署Nginx和Vue.js应用。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云负载均衡（CLB）：提供高可用、可扩展的负载均衡服务，可用于将请求均衡地分发给多个Nginx实例。详情请参考：https://cloud.tencent.com/product/clb
腾讯云对象存储（COS）：提供安全、可靠的对象存储服务，可用于存储Vue.js应用生成的静态文件。详情请参考：https://cloud.tencent.com/product/cos

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估和决策。

相关搜索:Kubernetes nginx入口定期提供404 nginx入口路由(默认后端404)路由正在使用React提供404 flutter web built但nginx route 404 路由返回错误404，但该路由存在 Laravel 5.7路由存在，但显示为404 Nginx子路径显示404错误所有页面都显示404未找到Nginx，但主页工作正常某些路由的Nginx HEAD请求返回404 Nginx上的Laravel API路由获取404 Laravel没有在屏幕上显示错误，但显示Nginx的404 Not Found页面尝试提供nginx缓存图像时使用Rails - 404 Rails路由出现在路由中，但抛出404 /index.html应返回404，但显示的是nginx欢迎页面 ASP.NET核心路由提供404 使用nginx将Laravel路由重定向到404 laravel路由存在，但返回了404错误 NGINX和Gatsby:设置nginx以路由到Gatsby 404页面 Nginx所有页面显示404错误，主页除外 phpMyAdmin显示404未找到(Ubuntu 18.04 Nginx)

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Kylin启动失败||启动成功但Web界面显示404

Kylin启动失败||启动成功但Web界面显示404 ---- 0.写在前面实验背景：离线数仓项目 Kylin版本：3.0.2 1.原因一：环境变量配置问题如果Kylin启动时控制台报某某依赖未找到的...❞ 3.原因三：hive-site.xml配置文件的问题还有一种情况：虽然兼容性问题和环境变量均没有error，但Kylin启动依旧失败报错信息描述大概为：检查Hive的可用性失败 ERROR：Check

1.6K1 0

Vue路由history模式踩坑记录：nginx配置解决404问题

但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。...比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成如下...但对于放到nginx下运行的时候，自然还会有其他注意的地方。...总结如下：在nginx里配置了以下配置后，可能首页没有问题，但链接其他会出现（404） location / { root D:\Test\exprice\dist; index...index.html index.htm; 　　try_files $uri $uri/ /index.html; } 2、匹配errpr_page location /{ 　　root /data/nginx

3.9K3 1

Vue3项目Build后部署在Nginx上F5刷新页面空白或404

环境 vue-cli 5.x vue-router 4.x Nginx 综述使用Vue3项目Vue-router4开发完毕后项目Build打包部署线上环境后，首页能正常访问菜单内点击切换也没有问题...，但当你刷新页面后，则出现 404 Not Found，故在此记录一下解决办法解决思路在与chatGPT进行深刻激烈的探讨后，确定了是Nginx的问题，根据chatGPT的引导进行配置依旧无法解决...，刷新页面时访问的资源在服务端找不到，因为此时vue-router设置路由地址被当作url地址，此时的地址路径肯定不是真实存在的，所以出现404现象。...之所以出现上面的现象，是因为在nginx配置的根目录/www/wwwroot/dist下面压根没有'XXX/xxx/xxx'这个真实资源存在，这些访问资源都是在js里渲染的。...index.html; root /www/wwwroot/dist; } 如上出现404的原因是由于在这个域名根目录/www/wwwroot/dist下面压根就没有'XXX/xxx/xxx'

2.2K4 0

用Vue.js搭建一个小说阅读网站

4.安装vue编译器vue-cli，在终端中输入命令：npm install -g vue-cli 5.安装webpack并初始化目录，在终端中输入命令：vue init webpack C://MyFirstVueProject...贴一张我的项目结构图： 3.部署API服务器因为前后端是两个服务器，所以，这里我们还需要一个api项目，向前端提供数据支持，这里我用的是.net core，代码就不写了。...在我阅读小说的时候，如果将该页面保存成书签，通过书签再进来，发现出现404错误，为什么？原来是因为这个url是个假地址，直接通过url进来，因为当前页面没有路由信息，所以会导致404的问题。...5.实现页面加载数据路由配置完了，说明页面可以正常跳转了，接下来该是数据的显示了，话不多说，直接上图，红框标注重点~，我们以小说正文页面为例： created是页面加载时会调用的方法，在这里，我们去获取数据就可以了...首先我们下载一个nginx的zip文件，解压。

3.7K0 0

从零开始用nginx+云服务器部署前端项目

里面配置部署应用包时的基本 URL publicPath，不配置的话默认是 publickPath:"/"； module.exports = { publicPath: "/", }; 为了统一vue-router路由的...index.html; } 保存文件:wq 注意：**SPA是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，不管我们应用有多少页面，构建物都只会产出一个index.html，当我们进入到子路由时刷新页面...，web容器没有相对应的页面此时会出现404，** 解决办法：只需要配置将任意页面都重定向到 index.html，把路由交由前端处理，对nginx配置文件.conf修改，添加try_files uri...uri/ /index.html; 所以如果前端项目路由用的是 history 模式，如果用默认配置可能会刷新页面404的问题详情可以参考：https://vue3js.cn/interview/vue.../404.html#%E4%BA%8C%E3%80%81404%E9%97%AE%E9%A2%98 vue-cli官方文档: https://cli.vuejs.org/zh/config/#publicpath

2.8K1 0

vue-cli打包之后的项目在nginx的部署

vue-cli执行 npm run build 进行打包，生成dist文件夹，把该文件夹下的文件直接复制到nginx服务器目录下，就可打开项目，但是只有首页是可以看到的，再刷新一下就404了，原因是vue...的项目为单页应用，路由找不到所致。...所以要在nginx服务器配置对所有的路径或者文件夹进行跳转。重定向到首页index下，这样就都能找到路由了。...但如果要使用正则表达式，则必须指定前缀。 [@] 即是命名location，一般只用于内部重定向请求。

2K8 0

快速搭建Vue-cli

npm install cnpm -g npm install --registry=https://registry.npm.taobao.org 安装vue-cli cnpm install vue-cli.../router'; //自动扫描路由配置 Vue.config.productionTip = false //显示声明使用VueRouter Vue.use(router) /* eslint-disable...展示重定向 { path:'/gohome', redirect: '/main',//重定向 } 404和路由钩子去除#号 export default new Router...'history', routes: [ { path:'/', name:'Index', component:Index } ] }) 404...处理新建404页面导入路由配置路由地址即可路由钩子分别为进入路由之前分别为进入路由之后分别为进入路由修改 Build打包注意事项将config/index.js的

1861 0

yii2使用nginx部署上线时访问非index.php页面显示404错误【遇到的坑】

yii2使用nginx部署上线时访问非index.php页面显示404错误【遇到的坑】如：访问首页（index.php）正常 ? 访问其他页面（非index.php）显示404错误 ?...解决方案：在nginx配置文件 server { #加入配置 location / { try_files $uri $uri/ /index.php?...$args; } } 正常显示： ?

2K3 1

vue项目代码部署发布总结

vue-router的路由模式主要有hash模式和history模式两种，一般线上项目使用history模式，这种模式的用户体验更好。...history模式在刷新浏览器时会向后端服务器发送真实的请求，比如：如果访问vue项目进入首页，在跳转至列表页面时操作刷新页面，浏览器会向url发送get请求，由于vue项目的路由是前端路由，页面将会变为...404。...vue-router的官方给出了多种解决方案，相对于apache和iis解决方案来说，nginx是更方便的解决方案，下面也会主要就nginx的解决方案进行讲解。...最后一个问题，在开发环境中如果项目需要跨域访问接口api，如何配置呢，这里需要配置webpack，以vue-cli为例子，配置文件在build目录下的dev-server.js中，修改如下：其核心内容其实使用到了

1.8K2 0

Nginx之error_page模块解读

，然后再由指定的路由处理，如下当错误代码是404时，相当于访问http://localhost:80/50x.html，正好被内部传送给 location = /50x.html让其来进行处理（需要注意必须有...为 200 ，但页面内容是 404.html 的内容error_page 404 500 = /404.html;# 这样配置访问错误页面时 http status 为 404 ，但页面内容是 404....error_page 404 /404.html 可显示自定义404页面内容，正常返回404状态码。...error_page 404 = /404.html 可显示自定义404页面内容，但返回默认200状态码。...但如果php中定义返回404状态码，404状态码可以正常返回，但无法显示自定义页面内容（出现系统默认404页面），这种情况可以考虑用410代码替代（ header("HTTP/1.1 410 Gone"

2.7K6 1

基于qiankun落地部署微前端爬”坑“记

上面是一个通过域名访问子应用的示意图，接下来我们看看一个view视图，header头部和sideMenu左侧菜单是属于portal门户的，而右侧区域则是显示切换子应用的视图，预期效果：当我们访问dev.portal.com...status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry 答案：你的打包姿势不对 ❝ vue-cli...1.7 history路由模式，需要如何配置ngnix，才能正常访问？ ❝ ? 啊宇同学：我看你访问的路由模式不是hash，而是history模式，那你是怎么解决当页面刷新404问题？...❞ 答案：通过nginx配置加入try_files，history 模式同样会有一个问题，就是当页面刷新时，如果没有合适的配置，会出现404错误，针对这种请看，需要额外在nginx配置，对于找不到url...try_files：用来解决nginx找不到client客户端所需要的资源时访问404的问题 proxy_pass：主要是用来配置接口网关反向代理，可以使得父子应用下访问的api是一致的，防止接口跨域问题

3.7K2 0

Vue项目打包部署总结

二、Vue项目打包同步文件到远程服务器 1、打包默认情况下，使用vue-cli创建的项目，package.json里的script应该已经配置了build指令，直接执行yarn build 或者 npm...关于静态资源的问题，vue-cli的推荐是尽量将资源作为你的模块依赖图的一部分导入（即放到assets中，使用相对路径引用），避免该问题的同时也带来其它好处： ?...，并不会存在a这个目录或者文件，就会导致404错误： ?...我们要配置nginx让这种情况下，服务器能够返回单页应用的index.html，然后剩下的路由解析的事情就交给前端来完成即可。 ?...再次打开刚才的about地址，刷新页面也不会404啦： ? 3、history模式部署到非域名根路径下非域名根目录下部署，首先肯定要配置publicPath。

2.4K7 0

Vue 项目打包部署总结

再次访问页面，发现页面内容已经变成了我们创建的index.html: 二、Vue项目打包同步文件到远程服务器 1、打包默认情况下，使用vue-cli创建的项目，package.json里的script...如果根路径/下的项目有子路由/test，那http://xxxx/test只会访问到/www里的项目，而不会访问该子路由。...关于静态资源的问题，vue-cli的推荐是尽量将资源作为你的模块依赖图的一部分导入（即放到assets中，使用相对路径引用），避免该问题的同时也带来其它好处：四、history模式部署默认情况下.../about的时候，服务器会去找/test指向的目录下的about子目录或文件，很显然因为是单页面应用，并不会存在a这个目录或者文件，就会导致404错误：我们要配置nginx让这种情况下，服务器能够返回单页应用的...再次打开刚才的about地址，刷新页面也不会404啦： 3、history模式部署到非域名根路径下非域名根目录下部署，首先肯定要配置publicPath。

4.1K4 1

vue-router嵌套子路由实际使用

(当然也可以只跳转一个区域的路由，另一个路由不变)也就是从A直接跳转到C（看下图）article-detail.vue：我们都知道，用vue-cli做项目，都会有一个顶层路由入口router-view...如果我们直接在浏览器输入http://localhost/index，你会惊奇的发现浏览器会出现404的错误！...我只用到过nginx服务器，就以这个为例吧： location / { try_files $uri $uri/ /index.html; } 一旦我们进行了上述配置，你的服务器就不会再返回404错误页面...为了避免发生这种情况，应该在Vue应用里面覆盖所有的路由情况，然后再给出一个404页面。...., // 这个路由应该放在最后面，否则会覆盖其他已有的路由 { path: '*', component: 404.vue} ] })

9711 0

【已解决】多种方式最新解决Invalid Host header(无效的主机头)服务器域名访问出现的错误

这个报错在网上有很多文章介绍解决办法，但是很多都没有没有用，这里为兄弟们排下坑，本文的解决方法已经验证没有问题，兄弟们可放心借鉴.一、报错现象======在yarn serve 项目启动成功，但是页面显示...通过将 disableHostCheck 设置为 true，可以允许来自其他主机的请求，但这可能会增加潜在的安全风险，因此谨慎使用。...lintOnSave: false, disableHostCheck:true, devServer: { host: 'localhost', port: 8089 }})如果vue-cli...五、拓展====1、historyApiFallback上面代码其中historyApiFallback用于在使用 Vue Router 或类似的前端路由库时，处理路由切换时的页面刷新问题。...当你使用浏览器的前进和后退按钮或手动输入URL时，Vue Router或其他路由库会在前端进行路由切换，但如果没有合适的配置，刷新页面时会导致404错误。

1.4K1 0

【已解决】多种方式最新解决Invalid Host header(无效的主机头)服务器域名访问出现的错误

header这个报错在网上有很多文章介绍解决办法，但是很多都没有没有用，这里为兄弟们排下坑，本文的解决方法已经验证没有问题，兄弟们可放心借鉴.一、报错现象在yarn serve项目启动成功，但是页面显示...通过将 disableHostCheck 设置为 true，可以允许来自其他主机的请求，但这可能会增加潜在的安全风险，因此谨慎使用。...lintOnSave: false, disableHostCheck:true, devServer: { host: 'localhost', port: 8089 }})如果vue-cli...五、拓展1、historyApiFallback上面代码其中historyApiFallback用于在使用 Vue Router或类似的前端路由库时，处理路由切换时的页面刷新问题。...当你使用浏览器的前进和后退按钮或手动输入URL时，Vue Router或其他路由库会在前端进行路由切换，但如果没有合适的配置，刷新页面时会导致404错误。

3.4K0 0

基于qiankun落地部署微前端爬”坑“记

qiankun把他们“嵌”到基座来加载，往下看实操上面是一个通过域名访问子应用的示意图，接下来我们看看一个view视图，header头部和sideMenu左侧菜单是属于portal门户的，而右侧区域则是显示切换子应用的视图...status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry 答案：你的打包姿势不对 ❝ vue-cli...啊宇同学：我看你访问的路由模式不是hash，而是history模式，那你是怎么解决当页面刷新404问题？...❞ 答案：通过nginx配置加入try_files，history 模式同样会有一个问题，就是当页面刷新时，如果没有合适的配置，会出现404错误，针对这种请看，需要额外在nginx配置，对于找不到url...的，将首页html返回 try_files：用来解决nginx找不到client客户端所需要的资源时访问404的问题 proxy_pass：主要是用来配置接口网关反向代理，可以使得父子应用下访问的api

1.9K2 3

部署Vue项目到服务器后404错误

nginx -t nginx -s reload 访问域名：在浏览器输入域名以访问部署的应用。以上是最直接的一种部署方式。...二、404错误原因及解决方案错误场景问题描述：Vue项目在本地运行正常，但部署到服务器后刷新页面出现404错误。错误定位：HTTP 404错误表示请求的资源不存在。...构建物只产出index.html，而nginx配置可能未涵盖所有路由。 Hash模式无问题：Hash模式不会将hash值包含在HTTP请求中，因此不会因hash变化重新加载页面，避免了404错误。...解决方案修改Nginx配置：配置所有页面请求都重定向到index.html，交由前端路由处理。...nginx -s reload 覆盖所有路由：在Vue应用中覆盖所有路由情况，并提供404页面。

921 0

Tomcat下部署vue项目

http://192.168.1.107:8080/ 第二种：IP+端口+项目名，如 http://192.168.1.107:8080/saas/ 2.第一种方式：ip+端口（前端后端修改）范例：vue-cli...项目使用路由，tomcat 作为服务器，项目文件夹名 saas 步骤： 1.修改配置文件 router.js export default new Router({ mode: "history"...其中的 saas 就是 webapps 目录下的项目名称（文件夹名） 3.第二种方式：ip+端口+项目名（前端修改）范例：vue-cli 项目使用路由，tomcat 作为服务器，项目文件夹名 saas...步骤： 1.首先创建 WEB-INF 文件，文件夹中创建 web.xml 文件：因为是 history 模式, 要防止在路由下刷新变成 404 错误，这需要让 tomcat 都定位到首页，也就是 index.html...404 错误。

3.3K2 0

laravel报404错误与NGINX报404错误区别

nginx自己配置的404页面和laravel配置的404页面；如果报了404 ；执行laravel的404页面；那这个404页面对nginx来说意味着什么 laravel 路由和页面找不到会报...404； nginx是木有这个地址报404；根据你的nginx配置如果请求的是静态文件，那么nginx会去找，文件不存在时，nginx会返回404，这个404就是nginx报的。...如果请求的一个路径，根据你的配置，会转发给laravel的index.php，index.php是存在的，所以nginx不会报404。...但是这个路径如果在laravel中没找到对应的路由，那么laravel就会显示404，这个404就是laravel的。

2.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭