vue项目线上页面刷新报404 解决方法

你好龙卷风！！！

已于 2024-02-01 11:34:59 修改

阅读量2.5k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： nginx vue 文章标签： vue.js 前端 nginx

于 2024-02-01 10:13:15 首次发布

本文链接：https://blog.youkuaiyun.com/zhaofuqiangmycomm/article/details/135966607

文章讲述了如何在Nginx配置中处理Vue单页应用的刷新请求，包括修改try_files指令以确保在刷新时返回index.html，以及如何为特定项目名添加访问配置。同时解释了try_files指令的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.修改配置文件 nginx.conf ，并重新加载或重启

我的nginx版本是1.9.9

location / {
  try_files $uri $uri/ /index.html;
}

原因：

打包后的dist下只有一个 index.html 文件及一些静态资源，这个是因为Vue是单页应用(SPA)，只有一个index.html作为入口文件，其它的路由都是通过JS来进行跳转

接下来看一下服务器的配置，以 nginx 为例

server {
  // 监听80端口
  listen 80;
  // 定义你的站点名称
  server_name www.mycomm.com;
  // 根据请求 URI 设置配置
  location / {
      // 站点根目录，这里为 vue 构建出来的 dist 目录
      root   /www/dist;
      // 站点初始页为index.html 或 index.htm
      index  index.html index.htm;
  }
}

我们现在可以根据 nginx 配置得出，当我们在地址栏输入 website.com 时，这时会打开我们 dist 目录下的 index.html 文件，然后我们在跳转路由进入到 website.com/login

关键在这里，当我们在 website.com/login 页执行刷新操作，nginx location 是没有相关配置