Vue.js：将新的Vue（）。$ mount（）转换为导出以进行服务器端渲染

Question

I have a Vue app that I'm trying to convert to server-side rendering.

Currently, the app attaches to the root HTML element through this file:

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');

I would like to export this root file for my server-entry.js file.

What's the most efficient way to do this? Should I refactor the main.js file? Should I create a separate file, the only purpose of which would be to pull in all the imports listed above and export an app, then import it and mount it in main.js ? What would that look like?

Answer 1

Here is what I have right now, which works:

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');