Vue replaces HTML with comment when compiling with webpack

While Leonie's answer is functional, including the template compiler isn't generally required for production builds. I would say it is likely undesired, as there will likely be performance impacts from building templates dynamically, which I assume is the case in this answer. Furthermore, it looks like Leonie's answer includes the full development version of Vue in the production build, which should be discouraged because of all of the extra content included in this version. Instead, it is possible to pre-compile templates during the build step.

The easiest method of doing this is to use single-file components (SFCs), as described in the previous link:

[The] associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings.

Another method, which I needed to use for my own situation, is to define an explicit render function instead of a template for the component definition, so a compilation isn't required. I needed this because the Vue project I had generated at the time used SFCs for all of its components, except for the root "mounting" component, which was defined explicitly using the following object:

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App />'
})

This worked fine in development mode, but failed in production with the "function comment" issue you were experiencing. Taking the insight from Leonie's answer, I replaced the above snippet with the following:

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  render: (h) => {
    return h(App)
  }
})

This resolved the issue on my production version without requiring me to include the full development version of Vue.


You are running a runtime-only build without the template compiler.

Check out https://v2.vuejs.org/v2/guide/installation.html#Webpack

You need to create an alias for 'vue', so webpack includes the correct vue/dist/*.js from your node_modules/:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

See also https://forum.vuejs.org/t/what-is-the-compiler-included-build/13239