我有一个Vue CLI应用程序，我想连接到服务器后端
服务器将返回一个带有数据负载的视图模板，我想将该负载作为JSON作为数据属性注入Vue应用程序。
Vue CLI生成的index.html文件如下所示(我在vue.config.js中将filenameHashing设置为false以避免随机文件名(：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link href=/css/app.css rel=preload as=style>
<link href=/css/chunk-vendors.css rel=preload as=style>
<link href=/js/app.js rel=preload as=script>
<link href=/js/chunk-vendors.js rel=preload as=script>
<link href=/css/chunk-vendors.css rel=stylesheet>
<link href=/css/app.css rel=stylesheet>
</head>
<body>
<div id=app>
</div>
<script src=/js/chunk-vendors.js></script>
<script src=/js/app.js></script>
</body>
</html>
main.js看起来如下：
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 }}">
这样我就可以访问SiteContainer中的数据，如下所示：
props: [
'data'
]
我基本上已经尝试过执行上面所写的操作，但由于render方法似乎用site-container组件完全替换了#appdiv，因此:data属性也丢失了。
我还看到，您可以将第二个参数与数据一起传递给render，但我不知道如何使其工作，最终，它在main.js中，而不是服务器将使用的视图模板文件，这是我需要JSON数据的位置，以便将其从服务器获取到Vue应用程序。
如何将数据从服务器生成的视图模板传递到Vue CLI应用程序，以使一切正常进行？非常感谢。
我想明白了。
通过首先在main.js中将SiteContainer组件定义为Vue.js组件，我可以自由地使用HTML文件中的组件来获得我想要的东西。
具体来说，我更改了main.js文件如下：
import Vue from 'vue';
import SiteContainer from './components/SiteContainer.vue';
Vue.component('SiteContainer', SiteContainer); // This is the key.
new Vue({
el: '#app'
});
然后HTML文件的body部分变成如下(即，替换我在上面的问题中的#appdiv(：
<SiteContainer id="app" :data="{{ json-string-of-data-payload-from-server }}">
</SiteContainer>