Для настройки использования vue-router на обычном хостинге или локальном сервере при разработке Vue.js приложения, необходимо следовать следующим шагам:
1. Установите vue-router в свое приложение с помощью npm:
```
npm install vue-router
```
2. Создайте файл для роутинга (например, routes.js) и определите в нем все маршруты вашего приложения, используя Vue Router API.
3. В главном файле вашего приложения (например, main.js) импортируйте vue-router, создайте новый объект Router и передайте ему массив с маршрутами.
4. Добавьте `<router-view></router-view>` в ваш шаблон приложения, чтобы vue-router мог отображать соответствующий компонент для каждого маршрута.
5. При сборке приложения перед размещением на хостинге, убедитесь что ваши маршруты скомпилированы правильно и содержат правильные пути к компонентам вашего приложения.
Для обеспечения корректной работы маршрутизации в Vue после размещения на хостинге, чтобы избежать ошибки 404 при обновлении страниц или прямом заходе на определенные адреса, можно воспользоваться такими методами:
1. Использовать режим history в vue-router, чтобы избежать добавления # к URL и иметь возможность правильно обрабатывать адреса страниц:
```
const router = new VueRouter({
mode: 'history',
routes
});
```
2. Настроить файл .htaccess для серверов Apache, чтобы все запросы направлялись на index.html (так как в Vue SPA все запросы должны обрабатываться этим файлом):
```
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
```
3. При использовании других серверов (например, Nginx) также можно настроить перенаправления на index.html в случае 404 ошибки.
4. Для дополнительного изучения по данной теме, можно прочитать официальную документацию по vue-router (https://router.vuejs.org/), а также посмотреть различные учебники и статьи, которые помогут разобраться в настройке маршрутизации в Vue.js на хостинге или локальном сервере.