Javascript 如何将服务器中的数据注入Vue CLI应用程序？

我有一个要连接到服务器后端的Vue CLI应用程序。
服务器将返回一个带有数据负载的视图模板，我希望将该负载作为JSON作为数据属性注入Vue应用程序

Vue CLI生成的

index.html

文件如下所示（我在

Vue.config.js

中将

filenameHashing

设置为

false

，以避免随机文件名）：

我希望能够做到以下几点：

import Vue from 'vue';
import SiteContainer from './components/layout/SiteContainer.vue';

new Vue({
    render: h => h(SiteContainer)
}).$mount('#app');

<div id="app" :data="{{ json-string-of-data-payload-from-server }}">

我基本上已经尝试过做我上面写的事情，但是由于

render

方法似乎完全用

站点容器
组件替换了
#app
div，因此
:data
属性也丢失了

我还看到，您可以将第二个参数传递给
render
，但我不知道如何使其工作，最终，这是在
main.js
中，而不是服务器将使用的视图模板文件中，这是我需要JSON数据从服务器获取到Vue应用程序的地方

如何将数据从服务器生成的视图模板传递到Vue CLI应用程序，以使一切正常进行？谢谢你。
我能想出来

通过首先在
main.js
中将
SiteContainer
组件定义为Vue.js组件，我可以在HTML文件中自由使用该组件来获取所需内容

具体来说，我将
main.js
文件更改如下：

props: [
    'data'
]

import Vue from 'vue';
import SiteContainer from './components/SiteContainer.vue';

Vue.component('SiteContainer', SiteContainer); // This is the key.

new Vue({
    el: '#app'
});

然后HTML文件的
body
部分变成以下内容（即，替换我在上面的问题中使用的
#app
div
）：



import Vue from 'vue';
import SiteContainer from './components/SiteContainer.vue';

Vue.component('SiteContainer', SiteContainer); // This is the key.

new Vue({
    el: '#app'
});

<SiteContainer id="app" :data="{{ json-string-of-data-payload-from-server }}">
</SiteContainer>