如果需要部署使用 vue 开发的项目，那么或多或少会遇到这个问题

就是在 vue 中你配置了很多动态路由，但是打包部署到 nginx 上后，在线上访问这些路由会访问不到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/home",
      name: "home",
      component: () => import("@/components/Home.vue"),
    },
  ],
});

export default router;

线上访问路由报错 404

无法访问

原因

这是因为在没有对 nginx 进行配置的情况下，它默认是去访问当前路径的网页资源，也就是 html 文件，但是我们使用 vue 开发的项目是单页面文件，并不会根据对应的路由生成静态的网页资源，也就是 html 文件

通俗来讲就是，比如你配置了一个 login 的路由，当访问 /login 的时候，浏览器会寻找 login.html 文件，而 vue 搭建的网站是单页面只有一个 index.html 文件，所以就会报错 404 找不到对应的资源

解决方案

解决方式就是更改你的 nginx 配置项目的那个配置文件

在 server 模块下的 location 模块下添加 try_files $uri $uri/ /index.html; 指令

这样所有的请求都会指向 index.html 文件，就不会报错 404 了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
server {
       listen       80 default_server;
       listen       [::]:80 default_server;
       server_name  _;
       root         /usr/share/nginx/html;

       # Load configuration files for the default server block.
       include /etc/nginx/default.d/*.conf;

       location / {
           # 添加下面这段
           try_files $uri $uri/ /index.html;  # 配置 Vue 动态路由
       }

	······

}