如何将数据从服务器注入到Vue CLI应用程序？
提问于 2019-11-01 20:26:04
我有一个想要连接到服务器后端的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方法似乎将#app div完全替换为site-container组件，所以:data属性也丢失了。
我还看到你可以将第二个参数传递给带有数据的render，但我不知道如何让它工作，最终，它是在main.js中，而不是服务器将使用的视图模板文件中，这是我需要的JSON数据从服务器到Vue应用程序的地方。
如何将数据从服务器生成的视图模板传递到Vue CLI应用程序以使一切正常运行？谢谢。
回答 1
Stack Overflow用户
发布于 2019-11-02 14:02:01
我能够弄明白这一点。
通过首先在main.js中将SiteContainer组件定义为Vue.js组件，我可以自由地使用main.js文件中的组件来获得我想要的内容。
具体地说，我按如下方式更改了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部分如下所示(即，替换我在上面问题中的#app div )：
<SiteContainer id="app" :data="{{ json-string-of-data-payload-from-server }}">
</SiteContainer>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58665492
复制相关文章
腾讯云开发者
