Vue.js 单页应用（SPA）在 Nginx 服务器上部署后，经常会遇到一个问题：当用户在浏览器中按 F5 刷新页面或直接访问某个子页面时，会出现 404 错误。这是因为 Nginx 默认配置下不知道如何处理单页应用的路由。

以下是解决这个问题的步骤：

前提条件

  • 已经安装了 Nginx

  • 已经构建了 Vue.js 项目（使用 npm run build 或 yarn build）

步骤

1. 将 Vue.js 项目部署到 Nginx

将 Vue.js 项目的 dist 文件夹内容复制到 Nginx 的 web 服务器目录中，通常是 /usr/share/nginx/html 或 /var/www/html。

# 示例 
cp -r your-vuejs-project/dist/* /usr/share/nginx/html/

2. 修改 Nginx 配置文件

找到 Nginx 的配置文件，通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default。

打开该文件并找到 server 块，然后添加或修改 location 块，增加一下伪静态规则：

server { 
	location / { 
  		try_files $uri $uri/ /index.html; 
	}
}

这里的关键是 try_files $uri $uri/ /index.html; 这一行。它告诉 Nginx，如果找不到请求的文件或目录，就返回 index.html 文件。

3. 重新加载 Nginx 配置

保存配置文件后，重新加载 Nginx 以应用更改。

sudo nginx -s reload

4. 测试

现在，你应该可以在浏览器中访问你的 Vue.js 应用，并且 F5 刷新或直接访问子页面不会出现 404 错误。

结论

通过简单地修改 Nginx 的配置文件，你可以解决 Vue.js 单页应用在 Nginx 部署中 F5 刷新导致的 404 问题。这样，无论用户如何刷新或直接访问子页面，都会被正确地重定向到 index.html，然后由 Vue.js 的前端路由接管。