Nginx 配置 Vue 动态路由

问题

当我们使用 Nginx 成功部署 Vue 项目之后，如果通过历史记录访问网站可能会出现以下情况：404 Not Found

原因

这是因为在没有对 Nginx 进行配置的情况下，它默认是去访问 /html/login 的网页资源，而我们使用的是 Vue 项目搭建的网站，并不会直接生成对应的静态网页资源。

解决方案

配置 Nginx 的 Vue 动态路由

1. 打开并编辑 Nginx 的配置文件

	vim /etc/nginx/nginx.conf

2. 配置：在 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 动态路由
        }

		······

	}

3. 重新加载 Nginx 的配置文件

	sudo systemctl reload nginx

4. 重启 Nginx 程序

	sudo systemctl restart nginx