vuecliで作成したルート直下のindex.htmlに変更を加える方法

前提・実現したいこと

vuecliで作成したルート直下のindex.htmlに変更を加えるたいのですが、うまくいきません。
なんでそんなこと、<div id="app">の中に書けばいいのですが、、
npmにてビルドされて作成されるファイルにvueファイル内のコンポーネントが描画されないので、
テストで必要になります。

初心者にて無知ですみません。
知ってる方いらしたら教えていただきたいです。
何卒よろしくお願いいたします。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width,initial-scale=1.0">
7  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8  <title>sample1</title>
9  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11</head>
12<body>
13  <noscript>
14    <strong>We're sorry but sample1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15  </noscript>
16  <div id="app"></div>
17  <div class="test" style="margin:10px 10px 10px 100px;">testTxt</div>
18  <!-- built files will be auto injected -->
19</body>
20<script>
21
22</script>
23</html>

補足情報（FW/ツールのバージョンなど）

<div class="test" style="margin:10px 10px 10px 100px;">testTxt</div> このtestTxtをhobehogeというテキストに変更したい。

退会済みユーザー

2019/10/08 05:01

> npmにてビルドされて作成されるファイルにvueファイル内のコンポーネントが描画されない「される」ならわかりますが「されない」とはどういった状態なのでしょうか

nezuko_kamado

2019/10/08 06:51 編集

ご質問ありがとうございます。ビルドされたファイルには、<div id="app">内はブラウザで描画されますが、ソースコードとして描画されないのでバックエンドの方が触る場合にコンポーネントにフックできないというご要望でこちらの質問をさせていただきました。テストとして、もし<div id="app"></div> 直下に新たな<div>を追加して testTxtをhogeに変更する方法があればぜひ教えて頂きたいです。 index.html内には <div id="app"></div>の中身が表示されないから、テストで <div class="test" style="margin:10px 10px 10px 100px;">testTxt</div> こちらのテキストを変える方法がないかをひたすら調べているところでした。言葉不足で申し訳ございません。

退会済みユーザー

2019/10/08 11:07

`ルート直下のindex.html` とは具体的にどこにある `index.html` でしょうか。

nezuko_kamado

2019/10/09 04:35

すみません。publicのなかのindex.htmlです。ご返信ありがとうございます！

退会済みユーザー

2019/10/09 04:58

フックとはいったい何なのだろうか。tanisi_a さんの回答やレスを読んでますます私にはどうしたかったのかわからなくなりました。すみません。お手上げです。

nezuko_kamado

2019/10/09 06:13

すみません。.vueのファイルをビルド後にvueのコンポーネントファイル内もindex.htmlに描画したい。 jsではなくindex.htmlにソースを反映出来ないかとの要望でした。結論私のできる範囲では描画はjsファイルにビルドされているので無理と回答させていただきました。したかったことは.ビルド前のvueファイルの中身をhtmlに反映して、 vue-carousel などのライブラリを使用した時にvueのライブラリで作ったスライダーに対して、アニメーションが終わって次のスライドが表示されたら今何枚目のスライドにいます。という表示をビルド後ファイルに記述がしたかったです。初めて質問したので、ルールがわかっていなくて大変申し訳ございませんでした。ご返信いただき本当にありがとうございました。