问题
当我们使用 Nginx 成功部署 Vue 项目之后,如果通过历史记录访问网站可能会出现以下情况:404 Not Found
原因
这是因为在没有对 Nginx 进行配置的情况下,它默认是去访问 /html/login 的网页资源,而我们使用的是 Vue 项目搭建的网站,并不会直接生成对应的静态网页资源。
解决方案
配置 Nginx 的 Vue 动态路由
- 打开并编辑 Nginx 的配置文件
vim /etc/nginx/nginx.conf
- 配置:在 server 块中添加一个新的 location块来处理 Vue 动态路由
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 动态路由
}
······
}
- 重新加载 Nginx 的配置文件
sudo systemctl reload nginx
- 重启 Nginx 程序
sudo systemctl restart nginx