Vue.js、index.html以外にもページを作ってくれ頼む。

速攻でSPAから離れた話題。

使用したもの

• Vue.js
• vue-cli
• Vuetify
• Veevalidation
• Netlify

おさらい

なんでこんな話をしているかっていうと前回の記事にて、Netlify formを使った際、フォーム内容をsubmitした後に遷移する画面が静的HTMLでないと飛ばなかったという話から。

じゃあその静的HTMLを作ってしまえと作った訳だが、vue.jsからFontAwesomeまで全部CDNで読み込んで無理やりファイルを作った。
Vueプロジェクトの中に独立したVueファイルがある状態は非常に気持ち悪い。

本題：index.html以外のhtmlをpublicに書き出したい。

SPAというのはちょっと置いておいて。。。

当初の構成はこんな状態。
静的thanksページにはCDNで色々読み込んでありhtmlという拡張子がついたVueファイル。（？）

src
  |
 public
  |--index.html
　　　　|--thanks.html//←静的thanksページを手動で追加した。
 component
  |-Form.vue
 views
  |--contact
      |--index.vue
      |--thanks.vue

そんな状態より、せっかく作ってあった/src/views/contact/thanks.vueを使ってthanksページを書き出してあげたい。絶対寂しい思いしてる。

そもそもpublic/index.htmlってどうやって生成されるんだ

vue-cliをインストールしたらもうプロジェクトの雛形ができてるからあまり意識してなかった。
どうして・・・どこかにapp.vueを/public/index.htmlに書き出せとか・・・
ないんですか？？あるなら出てきてくれ〜〜〜！！！

出てこなかったのですが、解決策は出てきました。
Vue CLI 3でSPAではなくMPA(複数エントリーポイント)のプロジェクトを作成する

か、神〜〜〜〜〜〜！！！！

私はVuetifyを使うときに勝手に（？）vue.config.jsが作られていたみたいだけど、ない時は自分で作ればいいんだろう。
そこに、ハァ〜〜〜エントリーポイントね！！webpackでやったやつだ！

上記のありがたい記事を読みながら今回私はvue.config.jsを次のようにしました。

module.exports = {
  transpileDependencies: [
    'vuetify'//このへんは`Vuetify`を使うときに勝手に記述された。ありがとう。
  ],
  pages: {
    index: {
      entry: 'src/pages/main.js', 
      template: 'public/index.html', 
      filename: 'index.html', 
    },
    thanks: {
      entry: 'src/pages/thanks/main.js',
      template: 'public/thanks.html',
      filename: 'thanks.html',
      title: 'お問い合わせありがとうございました。',
      },
  }
}

エントリーポイントのファイル名はmain.jsでしかダメなの？
src/main.jsとsrc/thanks.jsにしたかったけどうまく動いてくれなかったのでコードのようにディレクトリを分けてみました。

src/pages/main.jsがApp.vueをpublic/index.htmlを書き出すように、src/pages/thanks/main.jsがpublic/thanks.htmlに書き出せるようにvueファイルをつくってあげればいい。

そこで私はApp.vueと同じ階層に中身はほぼ同じThanksPage.vueを作ってあげて、/src/views/contact/thanks.vueをインポートしてみました。

で！！！！できない・・・？

どうやら、自動でpublic/thanks.htmlを作ってはくれないみたいなので最初に適当に作っておかないといけないみたい。

最後、危なかったでしたが無事、コンポーネントを使ったpublic/thanks.htmlができた。
めでたしめでたし。