Vue.js - Как обрабатывать несколько поддоменов в одном приложении.

В этой статье я покажу вам, как мы можем разделить приложение Vue.js на несколько субдоменов (или несколько доменов, если хотите), например example.com, admin.example.com, test.example.com и т. Д., За 3 простых шага.

Первоначально опубликовано на https://gosink.in/vue-js-how-to-handle-multiple-subdomains-on-a-single-app/

Настройка приложения Vue.js с Vue Router.
Настройка хостов в Windows и Mac / Linux для локального тестирования.
Разделение маршрутов и макетов и тестирование.

Репозиторий Github:

Https://github.com/apal21/Vue.js-VueRouter-multiple-subdomains

Настройка приложения Vue.js

Чтобы настроить приложение Vue.js, сначала нам нужно установить thevue-cli глобально.

$ npm install -g @vue/cli

Теперь нам нужно инициализировать новое приложение Vue, используя vue-cli. Мы будем использовать шаблон PWA (прогрессивное веб-приложение). Чтобы инициализировать это, выполните следующую команду:

$ vue init pwa project-name
$ cd project-name
$ npm install
$ npm run dev

В этой установке вам будет предложено установить VueRouter.
Если вы не устанавливали VueRouter из этой установки или используете какой-либо другой шаблон Vue, просто выполните следующую команду, чтобы установить его.

$ npm install vue-router --save

Настройка локальных хостов / серверов

Мы собираемся создать 3 разных домена / субдомена, myapp.local route1.myapp.local route2.myapp.local в Windows и Mac / Linux.

Окна

Откройте CMD (командную строку) от имени администратора и выполните следующую команду:

> notepad c:\Windows\System32\Drivers\etc\hosts

Теперь добавьте эти строки в конец файла:

127.0.0.1 myapp.local
127.0.0.1 route1.myapp.local
127.0.0.1 route2.myapp.local

Сохраните и закройте файл, и все.

Mac / Linux

Для пользователей Mac или Linux откройте терминал и выполните следующую команду:

$ sudo nano /etc/hosts

Теперь добавьте эти строки в конец файла.

127.0.0.1 myapp.local
127.0.0.1 route1.myapp.local
127.0.0.1 route2.myapp.local

Нажмите Ctrl + X или Command + X, чтобы выйти из редактора nano, и нажмите Y, чтобы сохранить изменения, внесенные в этот файл.

Написание кода - Настройка VueRouter

Это репозиторий Github является рабочим примером этого блога, и вы можете прочитать README.mdfile, чтобы настроить проект.

Настройка маршрутов

Если вы видите каталог router, он показывает 3 разных маршрута:

Все три маршрута обрабатывают разные компоненты.

Настроить маршруты

В этом файле в репозитории Github настроено три маршрута.

import Vue from 'vue';
import App from './App';
import index from './router';
import route1 from './router/route1';
import route2 from './router/route2';

Vue.config.productionTip = false;

const host = window.location.host;
const parts = host.split('.');
const domainLength = 3; // route1.example.com => domain length = 3

const router = () => {
  let routes;
  if (parts.length === (domainLength - 1) || parts[0] === 'www') {
    routes = index;
  } else if (parts[0] === 'route1') {
    routes = route1;
  } else if (parts[0] === 'route2') {
    routes = route2;
  } else {
    // If you want to do something else just comment the line below
    routes = index;
  }
  return routes;
};

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: router(),
  template: '<App/>',
  components: { App },
});

Здесь константа router сначала извлекает URL-адрес и извлекает имя домена. Он проверяет доменное имя, назначает маршрут и возвращает его, и это router обрабатывается Vue внизу.

Примечание. Вы не можете использовать vue-router для изменения субдомена. Это зависит от History API JavaScript и не позволяет обновлять междоменный URL.
Для изменения субдомена можно использовать HTML anchor tag <a>, JavaScript window.location или window.open и т. Д.

Vue.js - Как обрабатывать несколько поддоменов в одном приложении.