Конфигурация Nginx и Vuejs 3 с baseurl и общедоступным путем

У меня есть приложение 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 vue.js vuejs3 html5-history
person djcaesar9114    schedule 31.12.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел решение, отредактировав файл конфигурации nginx для веб-сайта:

...
server_name example.com
...

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

Вот так просто!

person djcaesar9114    schedule 01.01.2021