在使用Vue.js开发后台管理系统时，尤其是使用若依框架进行开发后，部署到服务器上可能会遇到一个常见的问题：刷新页面时出现404错误。这个问题通常是由于使用了Vue Router的history模式，而服务器没有正确配置导致的。本文将详细介绍如何通过配置Vue项目和Nginx来解决这个问题。

背景

在开发完后台管理系统并部署到服务器后，发现刷新页面会导致404错误。这是因为Vue Router的history模式去掉了URL中的#，但服务器并没有配置相应的路由规则来处理这些URL。因此，当用户刷新页面时，服务器会尝试查找对应的文件或路径，但由于这些路径在服务器上并不存在，因此返回404错误。

解决方法

1. 修改.env.production文件

首先，在Vue项目的.env.production文件中添加以下代码。将xxx-manage替换为你的部署相对路径，将your-domain替换为你的域名和端口。

# 相对于域名的路径
VUE_APP_APP_NAME = '/xxx-manage'

# 静态资源路径,项目部署地址，如果存在二级路径，nginx 配置的 try_files 应该为： $uri $uri/ /xxx-manage/index.html;
PUBLIC_PATH = 'http://your-domain/xxx-manage'

2. 修改Vue Router配置

接下来，修改Vue项目的router配置，确保base路径与.env.production文件中的VUE_APP_APP_NAME一致。

export default new Router({
  base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : "/",
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

3. 修改vue.config.js文件

在vue.config.js文件中，添加以下代码。这行代码的作用是判断打包时是否使用了生产环境配置。

publicPath: process.env.NODE_ENV === "production" ? process.env.PUBLIC_PATH : "/",

4. 配置Nginx

在Nginx配置文件中，找到80端口的server块，并添加以下配置。假设你的项目部署在/xxx-manage路径下。

location /xxx-manage {
    alias html/xxx-manage;
    index index.html;
    try_files $uri $uri/ /xxx-manage/index.html;
}

5. 打包项目

在命令行中运行以下命令，打包Vue项目：

npm run build:prod

6. 部署到Nginx

在Nginx的html目录下创建xxx-manage文件夹，并将打包生成的dist目录下的所有文件复制到xxx-manage文件夹中。

7. 检查配置并重载Nginx

最后，检查Nginx配置是否正确，并重载Nginx。

nginx -t
nginx -s reload

PS：

本来可以用hash路由能解决这个问题，但是我就是要装这个逼！！！！

希望这篇博客能帮助你顺利解决Vue项目部署中的404问题。如果你有任何问题或建议，欢迎在评论区留言讨论。