Режим истории HTML5

По умолчанию для vue-router используется режим хэш — он использует хэш URL для имитации полного URL, чтобы страница не перезагружалась при изменении URL.

Чтобы избавиться от хэша, можно использовать режим истории маршрутизатора, который использует API history.pushState для перехода по URL без перезагрузки страницы:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

При использовании режима истории URL будет выглядеть «нормально», например, http://oursite.com/user/id. Красиво!

Однако возникает проблема: так как наше приложение — одностраничное клиентское приложение без соответствующей конфигурации сервера, пользователи получат ошибку 404, если они обратятся к http://oursite.com/user/id напрямую в браузере. Не очень красиво.

Не волнуйтесь: для решения этой проблемы вам нужно добавить простую универсальную обратную маршрутизацию на сервере. Если URL не соответствует никаким статическим ресурсам, он должен отдавать ту же страницу index.html, на которой находится ваше приложение. Опять же, красиво!

Примеры конфигураций сервера

Примечание: в следующих примерах предполагается, что вы размещаете приложение в корневой папке. Если вы развертываете его в подпапке, вам следует использовать параметр publicPath Vue CLI и соответствующее свойство маршрутизатора base. Также вам необходимо скорректировать примеры ниже, чтобы использовать подпапку вместо корневой папки (например, заменив RewriteBase / на RewriteBase /name-of-your-subfolder/).

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Вместо mod_rewrite, можно также использовать FallbackResource.

nginx

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

Native Node.js

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.html', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.html" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

Express с Node.js

Для Node.js/Express можно использовать средство обработки connect-history-api-fallback.

Службы Интернета (IIS)

1. Установите IIS UrlRewrite
2. Создайте файл web.config в корневой папке вашего сайта со следующим содержимым:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Caddy

rewrite {
    regexp .*
    to {path} /
}

Firebase hosting

Добавьте это в свой firebase.json:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Оговорка

Есть оговорка: ваш сервер больше не будет сообщать об ошибках 404, так как все не найденные пути теперь отображают ваш файл index.html. Чтобы обойти эту проблему, вы должны реализовать универсальный маршрут внутри приложения Vue для отображения страницы 404:

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

В качестве альтернативы, если вы используете сервер Node.js, вы можете реализовать обратный вызов с помощью маршрутизатора на стороне сервера, чтобы сопоставить входящий URL и ответить ошибкой 404, если маршрут не найден. Для получения дополнительной информации ознакомьтесь с документацией по рендерингу на сервере Vue по адресу Vue server side rendering documentation.