Question

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

Vue CLI生成的index.html文件如下所示（为了避免随机文件名，我在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组件site-container属性替换了:data div也会丢失。

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

如何将数据从服务器生成的视图模板传递到Vue CLI应用程序以使一切正常？谢谢。

Answer 1

我能够弄清楚。

首先通过将SiteContainer组件定义为main.js中的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>

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

1 个答案: