Vue CLIを使ってbuildしたときに出てくるindex.htmlとかファイル名のハッシュとか消したい

なんらかのWebフレームワークのview側でテンプレートエンジン使っているとVue CLIと連携が難しくて導入を諦めて、CDNで頑張って実装している人いるんじゃないでしょうか。


```
　＼　　　　　　　　　　　　　　　　　　　　/
　　 ＼　　丶　　　　 　 i.　　 |　　　　　 /　　 　 ./　　　　 　 ／
　　　　＼　　ヽ　　　　　i. 　 .|　　　　　/　　　 /　　　　　 ／
　　　　　 ＼　　ヽ　　　　i　　|　　　　 /　　　/　　　　　／
　　　＼
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-‐
　　ー
　_＿　　　　　　　　　　わ　た　し　で　す　　　　　　　　　　　　--
　　　　　二　　　　　　　 　　／￣＼　　　　　　　　　　　＝　二
　　￣　　　　　　　　　　　　|　＾o＾　|　　　　　　　　　　　　　　　　￣
　　　　-‐　　　　　　　　　　 ＼＿／ 　　　　　　　　　　　　　　　‐-

　　　　／
　　　　　　　　　　　　/　　　　　　　　　　　　　　　ヽ　　　　　 ＼
　　　　／　　　　　　　　　　　　　　　　　　　　丶　　　　 ＼
　　 ／　　　/　　　 /　　　　　　|　　　i,　　　 　 丶　　　　　＼
　／　　　 /　　　　/　　　　　　 |　　　 i,　　　　　　丶　　　　　＼　　
```

そもそもマウント元のhtmlファイルをimportするの無理じゃん。と思っていたのですが、 
クソ忙しさから解放されて
 冷静になって考えてみたところ、思いついたのです。

逆転の発想（？？？）で、vueがマウントするhtmlタグだけをWebフレームワークのview側に残しておき、必要なjsとcssをbuild後適当に移動させればできるのではないでしょうか。ということを思いました。

というわけでじゃまになるのがコイツラです。


```sh
/work/vue-project # /work/vue-project/node_modules/.bin/vue-cli-service build --dest dist

⠇  Building for production...

 DONE  Compiled successfully in 5747ms                                                                                                                                                                                                                                2:42:11 PM

  File                                 Size                                                                                                               Gzipped

  dist/js/chunk-vendors.0820468a.js    87.06 KiB                                                                                                          32.62 KiB
  dist/js/app.80ddea4b.js              2.22 KiB                                                                                                           1.07 KiB
  dist/css/app.8cf54e25.css            0.33 KiB                                                                                                           0.23 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

/work/vue-project # ls -lhR dist/
dist/:
total 12K
drwxr-xr-x    3 root     root          96 Oct 26 14:42 css
-rw-r--r--    1 root     root        4.2K Oct 26 14:42 favicon.ico
-rw-r--r--    1 root     root         768 Oct 26 14:42 index.html
drwxr-xr-x    6 root     root         192 Oct 26 14:42 js

dist/css:
total 4K
-rw-r--r--    1 root     root         343 Oct 26 14:42 app.8cf54e25.css

dist/js:
total 792K
-rw-r--r--    1 root     root        2.2K Oct 26 14:42 app.80ddea4b.js
-rw-r--r--    1 root     root       11.4K Oct 26 14:42 app.80ddea4b.js.map
-rw-r--r--    1 root     root       87.1K Oct 26 14:42 chunk-vendors.0820468a.js
-rw-r--r--    1 root     root      686.9K Oct 26 14:42 chunk-vendors.0820468a.js.map
```

`index.html` とか `favicon.ico` とかいらんでしょ？ あとハッシュも邪魔じゃね？（語弊がある言い方）


（みんなの声）
**吐き出された後に消せばよくね？**
**吐き出されたあとにrenameにして移動するシェル書けばよくね？**


そうだね（）


と、とりあえずできたので手順を書いてく

# Dockerで用意

Dockerfile用意した方が楽なのでそっちでやったほうが良いですが今回はコマンド叩いてやります。


```zsh
$ docker run --rm -v $(pwd):/work -it node:lts-alpine3.14 /bin/sh

/ # cd /work
/work # npm install -g @vue/cli
/work # vue create vue-project

# 適当に選択(Vue v3でやりました）

/work # cd vue-project/
/work/vue-project # /work/vue-project/node_modules/.bin/vue-cli-service build --dest dist


⠇  Building for production...

 DONE  Compiled successfully in 5747ms                                                                                                                                                                                                                                2:42:11 PM

  File                                 Size                                                                                                               Gzipped

  dist/js/chunk-vendors.0820468a.js    87.06 KiB                                                                                                          32.62 KiB
  dist/js/app.80ddea4b.js              2.22 KiB                                                                                                           1.07 KiB
  dist/css/app.8cf54e25.css            0.33 KiB                                                                                                           0.23 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
```

これでおｋ。試す環境はできた。


# いらないと思うものをbuildしないようにする

https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch

こちらを参考にしました。（※推奨されないよーと書いてあるので環境とあわせてご検討ください）


```zsh
/work/vue-project # touch vue.config.js
```

`vue.config.js` を修正します。


```javascript
// vue.config.js
module.exports = {
    // disable hashes in filenames
    filenameHashing: false,
    // delete HTML related webpack plugins
    chainWebpack: config => {
        config.plugins.delete('html')
        config.plugins.delete('preload')
        config.plugins.delete('prefetch')
    }
}
```

もっかいビルドしてみる。


```zsh
/work/vue-project # /work/vue-project/node_modules/.bin/vue-cli-service build --dest dist

 DONE  Compiled successfully in 11535ms                                                                                                                                                                                                                               2:58:42 PM

  File                        Size                                                                                                                    Gzipped

  dist/js/chunk-vendors.js    87.05 KiB                                                                                                               32.61 KiB
  dist/js/app.js              2.21 KiB                                                                                                                1.06 KiB
  dist/css/app.css            0.33 KiB                                                                                                                0.23 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
```

ほいできた。これをあとはWebフレームワークが読めるディレクトリに移動してロードするようにするだけでおｋ．

# 雑感

- ドキュメントは読もうな
- 忙しいけど冷静になって考えような（涙）