使用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. [NOIP2005] 提高组 洛谷P1053 篝火晚会

    题目描述 佳佳刚进高中,在军训的时候,由于佳佳吃苦耐劳,很快得到了教官的赏识,成为了“小教官”.在军训结束的那天晚上,佳佳被命令组织同学们进行篝火晚会.一共有n个同学,编号从1到n.一开始,同学们按照 ...

  2. 【ZJOI2017 Round1练习】D8T2 sequence(DP)

    题意: 思路: #include <algorithm> #include <iostream> #include <cstring> #include <c ...

  3. freemarker导出word的一些问题

    首先,了解下freemarker导出word的流程: 参考https://www.cnblogs.com/llfy/p/9303208.html 异常一: freemarker.core.ParseE ...

  4. 携程Apollo(阿波罗)配置中心使用Google代码风格文件(在Eclipse使用Google代码风格)(配合阿里巴巴代码规约快速设置)

    Apollo默认使用了Google的代码风格,文件放在这里: https://github.com/ctripcorp/apollo/tree/master/apollo-buildtools/sty ...

  5. ssh forwarding 配置

    假设有服务器A,属于某一内网,无法直接登录. A: 10.0.1.48 root/password@a 但我们有一台跳板机器可以访问该Server A B: 10.0.2.48 root/passwo ...

  6. [TypeScript] Overload a Function with TypeScript’s Overload Signatures

    Some functions may have different return types depending on the types of the arguments with which th ...

  7. 杭电 3555 Bomb

    Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) Total Subm ...

  8. Windows 环境下运用Python制作网络爬虫

    import webbrowser as web import time import os i = 0 MAXNUM = 1 while i <= MAXNUM: web.open_new_t ...

  9. String,StringBuffer,StringBuilder三者有什么异同?

    相同点: 1.三者都是Java平台提供的三种类型得到字符串,它们可以储存和操作字符串. 不同点: 1.String是final修饰的,也就意味着String引用的字符串内容是不能被改变的.而Strin ...

  10. Codeforces Round #344 (Div. 2) E. Product Sum 二分斜率优化DP

    E. Product Sum   Blake is the boss of Kris, however, this doesn't spoil their friendship. They often ...