実現したいこと
Spring Thymeleafのhtmlの中でvueを書きたい。
現状、vueのビルド先をspringのresources/static配下にbuildするようにして
springのtemplatesのindex.htmlをたたくとVueのスタート画面を開くように出来ています。
他のhtmlもvueが対応できるように書きたいと思っているのですが、どのように書き埋め込んだらいいかわかりません。thymeleafのhtmlと同じファイルにvueの記載もしたいのですが。。。
こちらの記事を参考にしています
https://qiita.com/kaburankattara/items/607c7bd77fda2491d342
発生している問題・分からないこと
indexの書き方はわかったのですが、それ以降のファイルの書き方がわかりません。
試しにlogin.htmlを作り,controllerで/loginに遷移するようにして
login.htmlの中身をvueぽくやりましたがどうやればいいか見当もつかず、、
login.htmlも下に記載します。
該当のソースコード
index.html
1<!doctype html> 2<html xmlns="http://www.w3.org/1999/xhtml" 3 xmlns:th="http://www.thymeleaf.org"> 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 <link rel="icon" href="/favicon.ico"> 9 <title>vue</title> 10 <script defer="defer" th:src="@{/js/chunk-vendors.js}"></script> 11 <script defer="defer" th:src="@{/js/app.js}"></script> 12 <link th:href="@{/css/app.css}" rel="stylesheet"> 13 </head> 14 <body> 15 <noscript> 16 <strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> 17 </noscript> 18 <div id="app"></div> 19 </body> 20</html> 21こちらはbuild成功しvueの画面が表示済み
login.html
1<!doctype html> 2<html xmlns="http://www.w3.org/1999/xhtml" 3 xmlns:th="http://www.thymeleaf.org"> 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 <link rel="icon" href="/favicon.ico"> 9 <title>vue</title> 10 <script defer="defer" th:src="@{/js/chunk-vendors.js}"></script> 11 <script defer="defer" th:src="@{/js/app.js}"></script> 12 <link th:href="@{/css/app.css}" rel="stylesheet"> 13 </head> 14<meta charset="UTF-8"> 15<title>ログイン画面</title> 16</head> 17<body> 18<h2>ログイン画面</h2> 19{{ mes }} 20</body> 21</html> 22<script setup> 23 const mes = "aaa"; 24</script>
試したこと・調べたこと
上記の詳細・結果
login.htmlをtemplateで囲ってみたりしましたが、thymeleafが利かなくなるので違いました。。。。
どなたか教えていただきたいです。
補足
特になし
0 コメント