我有一个 Vue CLI 应用程序，我想连接到服务器后端。
服务器将返回一个带有数据负载的 View 模板，我想将该负载作为 JSON 注入(inject)到 Vue 应用程序中作为数据属性。
index.html Vue CLI 生成的文件如下所示(我在 filenameHashing 中将 false 设置为 vue.config.js 以避免随机文件名):
<!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属性(property)也丢失了。
我还看到您可以将第二个参数传递给 render有了数据，但我不知道如何让它发挥作用，最终，这是在 main.js 中，而不是服务器将使用的 View 模板文件，这是我需要 JSON 数据以将其从服务器获取到 Vue 应用程序的位置。
如何将数据从服务器生成的 View 模板传递到 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 部分变为以下内容(即替换我问题中的 #app div上):
<SiteContainer id="app" :data="{{ json-string-of-data-payload-from-server }}">
</SiteContainer>
关于javascript - 如何将服务器中的数据注入(inject) Vue CLI 应用程序？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58665492/