vue-router+webpack线上部署时单页项目路由,刷新页面出现404问题
使用vue项目,线上部署的时候,访问首页以及通过路由打开二级页面没有问题,但是一刷新就出现404现象
因为刷新页面时访问的资源在服务端找不到,因为vue-router设置的路由不是真实存在的路径。
解决办法是:在nginx.conf配置修改如下:
location / {
root html;
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}

红色字体是添加的配置,然后保存重启nginx即可解决。
vue-router+webpack线上部署时单页项目路由,刷新页面出现404问题的更多相关文章
- Vue Router 常见问题(push报错、push重复路由刷新)
Vue Router 常见问题 用于记录工作遇到的Vue Router bug及常用方案 router.push报错,Avoided redundant navigation to current l ...
- Vue 部署单页应用,刷新页面 404/502 报错
在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...
- Docker实战 | 第三篇:Docker安装Nginx,实现基于vue-element-admin框架构建的项目线上部署
一. 前言 在上一文中 点击跳转 通过IDEA集成Docker插件实现微服务的一键部署,但 youlai-mall 是前后端分离的项目,除了后端微服务的部署之外,当然还少不了前端工程的部署.所以本篇讲 ...
- Node+mongodb线上部署到阿里云
Node+mongodb线上部署到阿里云 部署使用的主要工具是pm2+nginx,使用码云的私有仓库,自动部署到服务器,私有仓库和服务器要事先设置好免密码登录.使用DNSPOD进行域名解析.事先准备好 ...
- 【Maven篇】---解决Maven线上部署java.lang.ClassNotFoundException和no main manifest attribute解决方法
一.前述 maven 线上部署的话会出现一些问题比如java.lang.ClassNotFoundException或者no main manifest attribute的话,是因为maven 配置 ...
- 关于docker线上部署时间问题
背景 公司线上部署采用docker swarm方式,这几天线上项目时间突然出了问题(ps:第一反应,我去,这也能出问题,代码里肯定藏毒了),线上时间总跟实际时间差八个小时.本着速战速决的原则,把所有时 ...
- FastAdmin 线上部署流程 (2018-05-03 更新)
FastAdmin 线上部署流程 首次部署 建立 git 环境. 建立 composer 环境. 建立 bower 环境. 将远程项目代码 git clone 到服务器上. 执行 composer i ...
- Django线上部署教程:腾讯云+Ubuntu+Django+Uwsgi(转载)
网站名称: 向东的笔记本 本文链接: https://www.eastnotes.com/post/29 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议.转载请注明出处! ...
- Node线上部署管理器PM2
PM2是一个带有负载均衡功能的Node应用的进程管理器.PM2可以利用服务器上的所有CPU,并保证进程永远都活着,0秒的重载,部署管理多个Node项目.PM2是Node线上部署完美的管理工具. PM2 ...
随机推荐
- [K/3Cloud] 单据新增、复制、新增行、复制行的过程
整单复制:先执行CopyData(获得数据包),在执行AfterCreateNewData(可处理数据包),不会执行AfterCreateNewEntryRow 单据新增:先执行AfterCreate ...
- msp430入门学习11
msp430的定时器--看门狗 msp430入门学习
- poj-1979 && hdoj - 1312 Red and Black (简单dfs)
http://poj.org/problem?id=1979 基础搜索. #include <iostream> #include <cstdio> #include < ...
- element-ui自定义table表头
场景描述: 这个需求的场景很简单,表头自定义居中显示 <el-table-column show-overflow-tooltip prop="telephone" labe ...
- JSP处理XML数据
以下内容引用自http://wiki.jikexueyuan.com/project/jsp/xml-data.html: 当通过HTTP发送XML数据时,使用JSP处理传入和传出的XML文件是有意义 ...
- cmd-net命令详解
NET ViewNET UserNET UseNET TimeNet Start Net PauseNet ContinueNET StopNet StatisticsNet Share Net Se ...
- [TypeScript] Define Custom Type Guard Functions in TypeScript
One aspect of control flow based type analysis is that the TypeScript compiler narrows the type of a ...
- 带头尾和动画的下拉刷新RecyclerView
项目地址:https://github.com/shichaohui/AnimRefreshRecyclerView 项目中包括一个demo(普通Androidproject)和Android Lib ...
- 智能社区--HI3516C可视门禁研发出来咯
铝壳.非常大气的外壳. 200W像素,HI3516C,携带server.创新的产品.欢迎交流:QQ237753582 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5u ...
- Project Euler problem 68
题意须要注意的一点就是, 序列是从外层最小的那个位置顺时针转一圈得来的.而且要求10在内圈 所以,这题暴力的话,假定最上面那个点一定是第一个点,算下和更新下即可. #include <iostr ...