Vue.js: преобразование нового Vue (). $ Mount () в экспорт для рендеринга на стороне сервера.

Question

У меня есть приложение Vue, которое я пытаюсь преобразовать в рендеринг на стороне сервера.

В настоящее время приложение подключается к корневому элементу HTML через этот файл:

import Vue from 'vue';
import AppLayout from './theme/Layout.vue';
import router from '../router';
import store from './vuex/index';

Vue.config.productionTip = false;

new Vue({
    router,
    ...AppLayout,
    store
}).$mount('#app');

Я хотел бы экспортировать этот корневой файл для моего server-entry.js файла.

Какой самый эффективный способ сделать это?Должен ли я выполнить рефакторинг файла main.js?Должен ли я создать отдельный файл, единственная цель которого заключается в том, чтобы извлечь все перечисленные выше импортные файлы и экспортировать приложение, затем импортировать его и смонтировать в main.js ?Как это будет выглядеть?

Answer 1

Вот что у меня сейчас работает:

app.js:

import Vue from 'vue';
import AppLayout from './theme/Layout.vue';
import router from '../router';
import store from './vuex/index';

Vue.config.productionTip = false;

const app = new Vue ({
    router,
    ...AppLayout,
    store
});

export {app, router, store};

main.js:

import {app} from './app';

app.$mount('#app');