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

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

路由预览

线上访问路由报错 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 动态路由
}

······

}