0

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

Vue CLI 生成的index.html文件如下所示（我设置filenameHashing为falseinvue.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方法似乎完全用组件替换了#appdiv，所以该属性也丢失了。site-container:data

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

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

4

1 回答 1

1

我能够弄清楚。

通过首先将SiteContainer组件定义为 Vue.js 组件main.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'
});

然后bodyHTML 文件的部分变为以下内容（即，替换#app div我在上面的问题中的那个）：

<SiteContainer id="app" :data="{{ json-string-of-data-payload-from-server }}">
</SiteContainer>
于 2019-11-02T14:02:01.410 回答