使用 baseurl 和 public 路径的 Nginx 和 Vuejs 3 配置

Question

我有一个具有历史记录模式的 VueJS 应用程序。我的网站是 example.com，我的应用程序的基础 URL 是我的应用程序，当您使用示例输入我的应用程序时。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"

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

Answer 1

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

...
server_name example.com
...

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

就这么简单！

使用 baseurl 和 public 路径的 Nginx 和 Vuejs 3 配置

Nginx and Vuejs 3 configuration with baseurl and public path

nginx

html5-history

vue.js

vuejs3