带有 baseurl 和公共路径的 Nginx 和 Vuejs 3 配置

问题描述

我有一个带有历史记录模式的 VueJS 应用程序。我的网站是 example.com，我的应用程序的基本 URL 是 my-app，当您使用 example.com/my-app 进入我的应用程序时，它运行良好，您可以浏览页面。不幸的是，当您尝试直接访问具有特定路由的页面时，我遇到了 404。

这是我的 Nginx 配置：

...
server_name example.com;
root /var/www/apps;
index index.html
try_files $uri $uri/ /index.html;
...

我在 vueJS 文档中找到了最后一行。

这是我的路由器配置：

const router = createRouter({
  base: process.env.VUE_APP_PUBLICPATH,history: createWebHistory(process.env.BASE_URL),routes,});

还有 .env.production 文件：

NODE_ENV=production
BASE_URL=/my-app/
VUE_APP_PUBLICPATH=/my-app/

我以为我正确地遵循了文档，但事实并非如此，因为当我检查 Nginx 日志时，错误如下：

2020/12/31 17:05:21 [error] 21351#0: *16 open() "/var/www/apps/index.html" Failed (2: No such file or directory),client: XXX.XXX.XXX.XXX,server: example.com,request: "GET /my-app/about HTTP/1.1",host: "example.com"

谁能帮我一把？提前致谢:)

解决方法

我找到了解决方案，为网站编辑了我的 nginx conf 文件：

...
server_name example.com
...

location /my-app/ {
  try_files $uri $uri/ /my-app/index.html;
}
...

就这么简单！