使用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问题的更多相关文章

  1. Vue Router 常见问题(push报错、push重复路由刷新)

    Vue Router 常见问题 用于记录工作遇到的Vue Router bug及常用方案 router.push报错,Avoided redundant navigation to current l ...

  2. Vue 部署单页应用,刷新页面 404/502 报错

    在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...

  3. Docker实战 | 第三篇:Docker安装Nginx,实现基于vue-element-admin框架构建的项目线上部署

    一. 前言 在上一文中 点击跳转 通过IDEA集成Docker插件实现微服务的一键部署,但 youlai-mall 是前后端分离的项目,除了后端微服务的部署之外,当然还少不了前端工程的部署.所以本篇讲 ...

  4. Node+mongodb线上部署到阿里云

    Node+mongodb线上部署到阿里云 部署使用的主要工具是pm2+nginx,使用码云的私有仓库,自动部署到服务器,私有仓库和服务器要事先设置好免密码登录.使用DNSPOD进行域名解析.事先准备好 ...

  5. 【Maven篇】---解决Maven线上部署java.lang.ClassNotFoundException和no main manifest attribute解决方法

    一.前述 maven 线上部署的话会出现一些问题比如java.lang.ClassNotFoundException或者no main manifest attribute的话,是因为maven 配置 ...

  6. 关于docker线上部署时间问题

    背景 公司线上部署采用docker swarm方式,这几天线上项目时间突然出了问题(ps:第一反应,我去,这也能出问题,代码里肯定藏毒了),线上时间总跟实际时间差八个小时.本着速战速决的原则,把所有时 ...

  7. FastAdmin 线上部署流程 (2018-05-03 更新)

    FastAdmin 线上部署流程 首次部署 建立 git 环境. 建立 composer 环境. 建立 bower 环境. 将远程项目代码 git clone 到服务器上. 执行 composer i ...

  8. Django线上部署教程:腾讯云+Ubuntu+Django+Uwsgi(转载)

    网站名称: 向东的笔记本 本文链接: https://www.eastnotes.com/post/29 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议.转载请注明出处! ...

  9. Node线上部署管理器PM2

    PM2是一个带有负载均衡功能的Node应用的进程管理器.PM2可以利用服务器上的所有CPU,并保证进程永远都活着,0秒的重载,部署管理多个Node项目.PM2是Node线上部署完美的管理工具. PM2 ...

随机推荐

  1. [K/3Cloud] 单据新增、复制、新增行、复制行的过程

    整单复制:先执行CopyData(获得数据包),在执行AfterCreateNewData(可处理数据包),不会执行AfterCreateNewEntryRow 单据新增:先执行AfterCreate ...

  2. msp430入门学习11

    msp430的定时器--看门狗 msp430入门学习

  3. poj-1979 && hdoj - 1312 Red and Black (简单dfs)

    http://poj.org/problem?id=1979 基础搜索. #include <iostream> #include <cstdio> #include < ...

  4. element-ui自定义table表头

    场景描述: 这个需求的场景很简单,表头自定义居中显示 <el-table-column show-overflow-tooltip prop="telephone" labe ...

  5. JSP处理XML数据

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/xml-data.html: 当通过HTTP发送XML数据时,使用JSP处理传入和传出的XML文件是有意义 ...

  6. cmd-net命令详解

    NET ViewNET UserNET UseNET TimeNet Start Net PauseNet ContinueNET StopNet StatisticsNet Share Net Se ...

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

  8. 带头尾和动画的下拉刷新RecyclerView

    项目地址:https://github.com/shichaohui/AnimRefreshRecyclerView 项目中包括一个demo(普通Androidproject)和Android Lib ...

  9. 智能社区--HI3516C可视门禁研发出来咯

    铝壳.非常大气的外壳. 200W像素,HI3516C,携带server.创新的产品.欢迎交流:QQ237753582 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5u ...

  10. Project Euler problem 68

    题意须要注意的一点就是, 序列是从外层最小的那个位置顺时针转一圈得来的.而且要求10在内圈 所以,这题暴力的话,假定最上面那个点一定是第一个点,算下和更新下即可. #include <iostr ...