Vue でのエラー「Content placeholder not found in template.」 #Vue.js

素のVueでSSRしている時に発生したエラー

/mnt/c/react-apps/vue-cli-ssr-example/node_modules/vue-server-renderer/build.js:7882
    throw new Error("Content placeholder not found in template.")
    ^

Error: Content placeholder not found in template.

つまり、ページテンプレート用のコメントが足りないよということ。

参考: stackoverflow

解決策 - ”” を正しく埋め込む

SSRの際のテンプレートとして使用しているhtmlファイルに、この文字列を埋め込んでおく必要がある。

index.template.html

<body>
  <!--vue-ssr-outlet-->
</body>

原因 - ビルドの際にhtmlファイルをminifyしていたため、コメントが消えていた

自分はVue CLI3でSSRを行っているが、その際にテンプレートファイルとして、publicフォルダ内の"index.html"を使用している。

Vue CLI3のDocsによると、この"public/index.html"はvue-cli-service buildすると、"html-webpack-plugin"が噛ませられるようだ。

そのため、"html-webpack-plugin"の"minify"オプション（正確には"html-minifier"のオプション）をいじることで解決した。

vue.config.js

chainWebpack: config => {
    config.plugin('html').tap(options => {
      options[0].minify.removeComments = false;
      return options;
    })
  },

// chainの使い方は以下
// https://cli.vuejs.org/guide/webpack.html#chaining-advanced

これで、minify時にコメントが削除されないようになる。

詳しくは、サンプル：Vue-CLI3_SSR_TypeScript_Firebase_Workbox_exampleを確認していただければと思う。