首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

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'

1.4K40

用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.6K00

从零开始用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.6K10

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"

1.6K61

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.7K20

基于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.5K20

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。

3.9K41

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.3K70

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} ] })

89110

【已解决】多种方式最新解决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错误。

62010

【已解决】多种方式最新解决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错误。

2.4K00

基于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.8K23

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 错误。

3K20

博客 Nuxt.js 移植重构与服务端渲染入门实现

来实现(无感的)页面路由切换、参数读取等操作,在 Vue-Cli 项目的初始化(或者叫创建原型??)...中有提供快捷引入选项。 在浏览器端,目前对于页面加载进度实现进度条大概最理想的方法就是在切换页面时加载一条自增长度的进度条,缓慢增加长度直到下个页面切换加载完毕直接滑动到末端并且淡出。...(); // 展示进度条 next(); }) // 路由加载完成 router.afterEach(() => { NProgress.done(); }) ↑ Vue-Cli 4.x 中...内置生产环境服务器(也就是默认在 localhost:3000) 结合 Nginx 反向代理来实现访问的,但是偶然发现 Vue-Cli 打包的静态站点文件是可以直接被访问的 直接丢上去就好,真棒.....路由配置 其实从 Vue-Cli 到 Nuxt.js 要改的地方不多,在 Nuxt.js 中原生无配置支持 SSR 服务端渲染及路由特性,异常方便。

99530
领券