Spring MVC jsp页面中的Vue.js问题答案

【问题标题】：trouble with Vue.js in Spring MVC jsp pagesSpring MVC jsp页面中的Vue.js问题
【发布时间】：2018-11-24 05:04:23
【问题描述】：

我正在尝试向我的 jsp 文件添加视图，我正在使用 cdn 向我的 spring mvc 应用程序添加视图。我有一个非常基本的设置，无论出于何种原因，我在数据对象上添加的 msg 属性仅显示为 {{ msg }} 而不是实际消息。

header.jsp：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link  href="./css/main.css" rel="stylesheet"/>
        <!-- development version, includes helpful console warnings -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="./js/main.js"></script>
    </head>
    <body> 
        <div id="app">
            <div class="container">

index.jsp：

<%@include file = "header.jsp" %>
    <div class="jumbotron">
        <h1>This is an example</h1>
        {{ msg }}
    </div>
        <a href="./reviews">reviews</a>
        <a href="./hotel_requests">hotel requests</a>
<%@include file = "footer.jsp" %>

页脚.jsp：

            </div>  
        </div>
    </body>
</html>

main.js：

let app = new Vue({
    el:'#app',
    data:{
        msg:'Hello Vue!'
    }
})

这一切都是作为 spring mvc 应用程序的一部分完成的。我一直在网上寻找解决方案，但似乎没有解决方案.... 或者该场景不适用于我。我使用的是 Apache tomcat 版本 9，以防万一服务器与它有关。

【问题讨论】：

标签： javascript spring spring-mvc jsp vue.js

【解决方案1】：

问题是引用我的外部 JavaScript 文件的脚本标记应该放在文档的底部。更具体地说，就在正文 () 的结束标记之前。它以某种方式有所作为......

【讨论】：