3

I'm working on a little multi-page application based on Vue.js CLI 3 and Spring boot for the backend.

I read the official doc to build a multi page, so my vue.config.js looks like:

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

Everything works fine, until I add some Thymeleaf syntax in my templates (e.g. with placholders ${text}). The build fails because of the ${} placeholders which are not resolved (I don't know which loader or plugin try to resolve thoses placeholders, I use the standard vue-cli webpack project structure..).

Is there a way to configure webpack in order to ignore the Thymeleaf syntax and to not trying to resolve thoses placeholders?

gWombat
  • 517
  • 2
  • 11
  • use html-loader. But it won't be enough. Also filename is the destination path. So it should be html – atilkan Oct 10 '18 at 14:26

1 Answers1

1

I replaced $ by <%="$"%> as workaround.

But it's not work for <script></script>

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

Then I found solution

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