将新的 Vue js 3 应用程序集成到 spring boot/thymeleaf 应用程序答案

【问题标题】：integrate new Vue js 3 app to spring boot/thymeleaf application将新的 Vue js 3 应用程序集成到 spring boot/thymeleaf 应用程序
【发布时间】：2021-04-11 18:53:01
【问题描述】：

我已经有一个使用 spring boot/thymeleaf 作为模板引擎构建的应用程序，一切正常，现在我需要向应用程序添加新部分，我需要使用 Vue js 3 构建它，我想做它在我的开发环境中，并且能够将它与我的主应用程序一起部署到 tomcat 服务器中，当然还可以从我的原始应用程序中加载它。

所以现在在“src”中，我使用 vue-cli 创建了新的 vue 应用程序，我只将端口更改为 8888：

我可以在 localhost:8888 上探索它，它正在工作，这是 main.js：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

当然还有默认的 app.vue：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

另外我创建了 thymeleaf 文件 vueapp.html 和一个控制器来将我路由到它：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<body>
    <div id="wrapper">
        <div id="page-content-wrapper">
            <div id="app"></div>
        </div>
    </div>

    <script
        th:if="${#arrays.contains(@environment.getActiveProfiles(),'dev')}"
        src="http://localhost:8888/dist/build.js"></script>
    <script
        th:if="${!#arrays.contains(@environment.getActiveProfiles(),'dev')}"
        src="/static/js/build.js"></script>

</body>
</html>

    @GetMapping("/vue")
    public String vueApp(ModelMap model, HttpSession session) {
        
        return "user/vueapp";
    }

thymeleaf 已加载，build.js 也已加载，但未加载 Vue 应用程序内容页面仍为空且 id="app" 的 div 也为空

任何人都可以帮助我将 vue 应用程序与 thymeleaf 集成的最佳实践

注意：以后需要vue-router，我关注了this，谢谢。

【问题讨论】：

标签： spring-boot vue.js thymeleaf vuejs3

【解决方案1】：

如果使用 vue.js 很简单，我建议执行以下操作：

从你的项目中移除 Vue。
通过cdn将Vue添加到index.html中（也可以使用fragment），例如： <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
通过cdn将Babel添加到index.html中（也可以使用fragment），例如：<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"> </script>

在页面上设置一个Vue应用：

<script type="text/babel">
var app = new Vue({
    el: '#youSelector'
});

这段代码在页面上创建了一个 Vue 应用程序。现在，如果您有一个大型应用程序，我建议您放弃单体应用程序，您应该分别创建前后端。

【讨论】：