vue-route+webpack部署单页路由项目,访问刷新出现404问题
问题描述:
前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx。部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会出现404现象!如下:
问题原因:
刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径。
如上的404现象,是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在,这些访问资源都是在js里渲染的。
服务端nginx的一开始配置如下(假设域名为:testwx.wangshibo.com):
[root@test-huanqiu ~]# cat /Data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf
server {
listen 80;
server_name testwx.wangshibo.com;
root /Data/app/xqsj_wx/dist;
index index.html;
access_log /var/log/testwx.log main;
}
如上出现404的原因是由于在这个域名根目录/Data/app/xqsj_wx/dist下面压根就没有loading这个真实目录存在。
问题解决:
在nginx配置里添加vue-route的跳转设置(这里首页是index.html,如果是index.php就在下面对应位置替换),正确配置如下(添加下面标红内容):
[root@test-huanqiu ~]# cat /Data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf
server {
listen 80;
server_name testwx.wangshibo.com;
root /Data/app/xqsj_wx/dist;
index index.html;
access_log /var/log/testwx.log main;
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
}
重启nginx后,问题就迎刃而解了。
[总结:nginx配置文件里一定要定义access和error日志,出现问题要第一时间查看日志(error)]
转载于:https://www.cnblogs.com/sweeeper/p/11459693.html
vue-route+webpack部署单页路由项目,访问刷新出现404问题相关推荐
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- 前端单页路由《stateman》源码解析
<stateman>是波神的一个超级轻量的单页路由,拜读之后写写自己的小总结. stateman的github地址 github.com/leeluolee/s- 简单使用 以下文章全部以 ...
- div+mui+vue.js 制作问卷调查单页 ——题目答案是造的json
div+mui+vue.js 制作问卷调查单页 --题目答案是造的json 先来看一下效果图: 主要就是用读取json题目和答案,记录答案ID. 一次性去读10道题目,vue.js控制当前题目的显示影 ...
- BUI 单页路由 学习笔记
创建单页工程 使用buijs命令行构建. 目前 >>我<< 只通过这种方式 使用 buijs命令行 创建demo成功过,其他暂无成功! 创建demo工程: # 创建目录 $ m ...
- Vue全家桶 + webpack 构建单页应用初体验
文章指南 主题 承接这上一篇Vue + Webpack 构建模块化开发框架详解,我们知道了如何使用webpack对vue进行打包,从而开始我们的前端模块化开发之路,这一篇在上一篇的基础上讲解 Vu ...
- Vue 部署单页应用,刷新页面 404/502 报错
在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({mode: ...
- 404 单页应用 报错 路由_Vue 部署单页应用,刷新页面 404/502 报错
在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...
- weex android单页路由,基于weex的有赞无线开发框架
出于对开发效率和动态化的要求,无线端的开发框架也一直在更新,从 Hybrid.结构化 Native View.React Native.Weex,再到现在正在大受关注的 Flutter.什么样的框架才 ...
- WebPack在多页应用项目中的探索
WebPack在项目配置中的探索(持续更新中) webpack + gulp + vue (thinkPHP后台配置) 一.项目需求(请认真看目录结构,项目构建很大都基于目录来的) --- Appli ...
最新文章
- python操作系统-Python与操作系统有关的模块
- Faster_RCNN 4.训练模型
- Oracle并购Innobase公司是好意还是背后一刀
- Gvim开发环境配置笔记--Windows篇
- 从架构设计理念到集群部署,全面认识KubeEdge
- Android doc|Getting Started|部分 --转载 保存数据
- 关于部分手机无法搜索到5G wifi信号的解决方法
- 标准模板库(STL)之 list 列传
- 以太坊智能合约部署与交互
- js基础-10-url,src,href的理解
- 网络暴利行业,天龙私服赚千万是不是梦想?
- 借助WinPE进行Windows系统安装
- 家用台式电脑计算机上的硬磁盘,台式电脑如何连接硬盘
- G++’s Family
- idea mysql可视化_IntelliJ IDEA 内置数据库管理工具实战
- 攻读计算机应用在职研究生,在职研究生《计算机应用》复习资料.doc
- 记十月五日寨口大坡徒步
- mac玩rust用什么画质_Steam Mac/Windows游戏性能、画质对比
- CTeX 自动化学报模板使用
- PTA 6-1 舞伴问题