なんらかのWebフレームワークのview側でテンプレートエンジン使っているとVue CLIと連携が難しくて導入を諦めて、CDNで頑張って実装している人いるんじゃないでしょうか。
＼ /
＼ 丶 i. | / ./ ／
＼ ヽ i. .| / / ／
＼ ヽ i | / / ／
＼
-‐
ー
_＿ わ た し で す --
二 ／￣＼ ＝ 二
￣ | ＾o＾ | ￣
-‐ ＼＿／ ‐-
／
/ ヽ ＼
／ 丶 ＼
／ / / | i, 丶 ＼
／ / / | i, 丶 ＼
そもそもマウント元のhtmlファイルをimportするの無理じゃん。と思っていたのですが、 クソ忙しさから解放されて 冷静になって考えてみたところ、思いついたのです。
逆転の発想（？？？）で、vueがマウントするhtmlタグだけをWebフレームワークのview側に残しておき、必要なjsとcssをbuild後適当に移動させればできるのではないでしょうか。ということを思いました。
というわけでじゃまになるのがコイツラです。
/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用意した方が楽なのでそっちでやったほうが良いですが今回はコマンド叩いてやります。
$ 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しないようにする
こちらを参考にしました。（※推奨されないよーと書いてあるので環境とあわせてご検討ください）
/work/vue-project # touch vue.config.js
vue.config.js を修正します。
// 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')
}
}
もっかいビルドしてみる。
/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フレームワークが読めるディレクトリに移動してロードするようにするだけでおｋ．
雑感
- ドキュメントは読もうな
- 忙しいけど冷静になって考えような（涙）