vue-router, nginx и прямая ссылка

Question

Я пытаюсь настроить vue-router на моем сервере nginx. У меня проблема в том, что мой маршрут не работает, если я ввожу URL прямо в браузер myapp.com/mypath,

Я попробовал конфигурацию сервера, как описано в документации к маршрутизатору Vue, а также предложил аналогичные конфигурации при переполнении стека. Моя текущая конфигурация местоположения nginx выглядит следующим образом:

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

location /subscribe {
    proxy_pass http://127.0.0.1/subscribe // express API app
}

Все, что делает, это перенаправляет любой путь к моему корневому компоненту (путь: /) и не /mypath, Это имеет смысл и location Кажется, только перенаправить в файл индекса. Как я могу перенаправить прямую ссылку myapp.com/mypath в /mypath маршрут в моем приложении VueJS?

Вот как сейчас настраиваются мои VUE маршруты:

...
const routes = [
    { path: '/', component: Landing },
    { path: '/mypath', component: MyPath }
];

const router = new VueRouter({ mode: 'history', routes });

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

Answer 1

Я нашел 1 возможное решение с предложением от сотрудника.

Сейчас я передаю URI в качестве параметра запроса в nginx. Итак, мой конфиг теперь такой:

location / {
    try_files $uri $uri/ /index.html?uri=$uri
}

Тогда в моей конфигурации маршрутизатора в VueJS:

const routes = [
{
    path: '/',
    component: Landing,
    beforeEnter: (to, from, next) => {
        const { uri } = to.query;
        if (uri != null && uri != '/') {
            next(false);
            router.push(uri);
        } else {
            next();
        }
    }
}, ...

Это, кажется, делает свое дело, хотя выглядит немного хитроумно.

Answer 2

Я боролся в течение нескольких часов, решая ту же проблему. Ведь этот конфиг у меня работает:

events {
...
  http {
  ...
    server {
          listen       80;
          server_name  localhost;

          location / {
              root   /path/to/your/project/html;
              index  index.html index.htm;
              include  /etc/nginx/mime.types;
              try_files $uri $uri/ /index.html;
          }
    }
  }
}

У меня почти такая же настройка роутера, как и у вас.

Answer 3

Используете ли вы собственный публичный путь (mypath) в vue.conf и nginx?

Если это так, вам нужно изменить конфигурацию, чтобы она соответствовала этому пути.

      location /mypath {
    try_files $uri $uri/mypath /mypath/index.html
}

Answer 4

1. Получил: /etc/nginx/sites-enabled

2. Откройте конфиг для вашего домена

3. добавьте следующий код в "корень"

   расположение / { try_files $uri $uri/ /index.html; }

4. сохраните файл

5. перезапустите сервер nginx с помощью команды: /etc/init.d/nginx restart

6. Обновить браузер

7. Помолись за меня:)

Answer 5

В моем случае try_filesне сработало, вероятно, потому, что другой nginx работает над моим приложением nginx, используя proxy_pass. Мне пришлось использовать перезапись ошибки 404:

      server {
    listen ${NGINX_PORT} ssl;
    server_name ${NGINX_HOST};
    ssl_certificate ${NGINX_SSL_CERTIFICATE};
    ssl_certificate_key ${NGINX_SSL_CERTIFICATE_KEY};
    error_page 404 =200 /index.html;
    location / {
        root ${NGINX_ROOT_LOCATION};
        index  index.html;
        include  /etc/nginx/mime.types;
    }
}

Answer 6

ну, у меня была такая же проблема, поэтому я попытался перенаправить каждые 404 ошибки на корневой URL-адрес, и это отлично работает.

1. Добрался до: /etc/nginx/sites-enabled

2. Откройте файл конфигурации по умолчанию

3. добавьте эту строку перед местоположением для перенаправления 404:

   ошибка_страница 404/;

сохраните файл и не забудьте перезапустить nginx

Answer 7

Мое предложение: убедитесь, что вы используете следующую строку, как это предлагается в документации vue-router. Но, кроме того, если у вас есть несколько файлов для настройки вашего сервера nginx, например, файл для настройки SSL вашего сервера, обязательно включите его также в эти файлы.