Version

3.2.26

Reproduction link

codesandbox.io

Steps to reproduce

const sfc = require('@vue/compiler-sfc');
const result = sfc.compileTemplate({
    id: 'test',
    source: '<div><!--test--></div>',
    isProd: true,
});
console.log(result.code);

What is expected?

According to the documentation, "Vue will remove HTML comments inside templates in production", so the comment <!--test--> is not supposed to survive as I set isProd to be true.

What is actually happening?

The resulting code contains _createCommentVNode("test").

I believe Vue CLI does remove the comments in production build, but I have the need of custom building and I need to call compiler-sfc directly. It should behave the way as described in the docs.

you should add compilerOptions as below:

const result = sfc.compileTemplate({
  id: "test",
  source: "<div><!--test--></div>",
  isProd: true,
  // add this
  compilerOptions:{
    comments:false
  }
});

@edison1105 Thanks for the tip! It does solve the problem, but that doesn't seem to be consistent with the docs (https://v3.vuejs.org/api/application-config.html#compileroptions-comments), which says that the compilerOptions.comments is supposed to be false by default.

@MuTsunTsai app.config.compilerOptions.comments is a runtime option. but in your scenario, there is no runtime.

@edison1105 I see; that was a little confusing. It also turns out that isProd is not related at all. The only setting that matters is compilerOptions.comments in this scenario. I wonder if this is documented anywhere?

see https://github.com/vuejs/vue-next/blob/master/packages/compiler-sfc/src/compileTemplate.ts#L54 Usually, the user does not manually call the compileTemplate method to compile the template, so there is no documentation here.