如何使用vue.js获取本地html文件？

Question

如何使用vue.js获取本地html文件？

htmliisvue.jsvisual-studio-codesingle-page-application

10

我正在跟随这个例子

我正在尝试使用vue.js加载一个html文件并添加到我的模板中。

我的尝试：

HTTML：

<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/Static/content/css/foundation.css">
    <link rel="stylesheet" type="text/css" href="/Static/content/css/spaceGame.css">

</head>

<body>
    <div id="app">
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="large-12 cell">
                    <h1>Welcome to Foundation</h1>
                </div>
            </div>
        </div>

        <div class="grid-x grid-padding-x">
            <div class="large-4 columns"></div>
            <div class="large-8 columns">
                <component :is="currentView"></component>
            </div>
        </div>

    </div>
    <!-- Footer -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/Static/scripts/foundation.js"></script>
    <script type="text/javascript" src="/Static/scripts/what-input.js"></script>

    <script type="text/javascript" src="/Static/scripts/space.js"></script>
</body>

</html>

脚本：

$(function() {
    $(document).foundation()

    var myData = '../../Views/login.html';
    Vue.component('manage-posts', {
        template: myData,
    })

    Vue.component('create-post', {
        template: '#create-template'
    })

    new Vue({
        el: '#app',
        data: {
            currentView: 'manage-posts'
        }
    })

});

错误：

我收到了以下内容：

组件模板需要一个根元素，而不只是文本。

将 var myData = '../../Views/login.html'; 更改为：

 var myData = '<div>../../Views/login.html</div>';

解决了错误，但是...我该如何加载实际的HTML文件？

我是单页应用程序和Vue.js的新手，已经花了一些时间，但还是无法解决。

编辑：

我要加载的HTML文件：

<div>
    <template id="manage-template">

    <form>
        <div class="sign-in-form">
            <h4 class="text-center">Sign In</h4>
            <label for="sign-in-form-username">Username</label>
            <input type="text" class="sign-in-form-username" id="sign-in-form-username">
            <label for="sign-in-form-password">Password</label>
            <input type="text" class="sign-in-form-password" id="sign-in-form-password">
            <button type="submit" class="sign-in-form-button">Sign In</button>
        </div>
    </form>
</template>
</div>

编辑2：

如果这对答案有任何影响，我想指出：使用VS Code，站点正在运行IIS，这里没有使用node.js。

- ThunD3eR

3个回答

6

     <div v-html="compiledHtml"></div>

data: function() {
    return {
      fileName: "terms.html",
      input: ""

    };
  },
     created() {
        this.fileName = this.$route.params.fileName;
        this.loadFile()
    }
    computed: {
        compiledHtml: function() {
          return this.input;
        }
      },
    methods: {

        loadFile() {
          axios({
            method: "get",
            url: "../../static/" + this.fileName
          })
            .then(result => {
              this.input = result.data;
            })
            .catch(error => {
              console.error("error getting file");
            });
        }
      },

这段代码是可以工作的。关键在于计算变量。

- lguerra10

对我不起作用 - Alexandr Kazakov

-3

当您将模板指向'../../Views/login.html'时，模板实际上是一个字符串，其值为../../Views/login.html，因此您需要一种方法将文件数据获取到JavaScript变量中。
您可以使用RequireJS或使用php填充模板（例如使用file_get_contents）来完成此操作。

获取数据的快速示例：

var template_data = "<?php echo file_get_contents('../../Views/login.html'); ?>";
console.log(template_data);

测试一下这个例子，并检查您的浏览器控制台，您也可以通过 Ajax 进行加载。

- AngelsDustz

1

这个回答完全没有意义。你有仔细阅读整个问题吗？ - ThunD3eR

除非我误解了，您想加载一个HTML文件并将其用作Vue.js模板。 - AngelsDustz

准确地说，你的回答如何帮助我到达目的地？我并不是想无礼，但我完全不明白这有什么帮助？如果有必要，我已经编辑了我的问题。 - ThunD3eR

我更新了答案，我稍微误解/错读了一下，我的错。 - AngelsDustz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bert · Accepted Answer

Vue提供了一种异步创建组件的方法。在这种情况下，您可以使用它从服务器检索模板。

在此示例代码中，我将使用axios来检索模板，但您可以使用任何您喜欢的库。

Vue.component('manage-posts', function(resolve, reject){
  axios.get("../../Views/login.html").then(response => {
    resolve({template: response.data})
  })
})