spring-boot - Vue js CLI 3 无法使用 Thymeleaf 语法​​构建

Question

我正在开发一个基于 Vue.js CLI 3 和后端 Spring boot 的小型多页面应用程序。

我读了official doc构建一个多页面，所以我的 vue.config.js 看起来像:

module.exports = {    outputDir: 'target/dist',    pages: {        home: {            entry: 'src/home/home.js',            template: 'src/home/home.html',            filename: 'home.js'        },        otherPage: {...}    }}

一切正常，直到我在我的模板中添加一些 Thymeleaf 语法​​(例如，使用 placholders ${text})。由于未解析的 ${} 占位符，构建失败(我不知道哪个加载器或插件尝试解析这些占位符，我使用标准的 vue-cli webpack 项目结构..) .

有没有办法配置 webpack 以忽略 Thymeleaf 语法​​并且不尝试解析那些占位符？

Answer 1

我替换了$通过 <%="$"%>作为workaround .

但它不适用于 <script></script>

<script>
    var user = <%="$"%>{user};
</script>

然后我找到solution

<script th:inline="javascript">
/*<![CDATA[*/
    var user = /*[[<%="$"%>{user}]]*/ 'default';
/*]]>*/
</script>