Vuejs CLIにて一部を外部htmlファイルを読み込んで実装する方法

Vuejs CLI環境下で一部をhtmlで実装したい時

Vuejs CLIでvue拡張子のファイル内で一部をhtmlファイルを読み込んで実装したい時がある方、
その方々に、試行錯誤を経て分かった方法を共有します。

参考

• Vue.jsで外部HTMLファイルをinclude(っぽく)する

環境の整理

• 開発環境：Vuejs CLIでインストールしたばかりの環境

方法

1. Vuejs CLIをインストールする。

2. HelloWorld.vueが生成される、その中を以下のように変更。

   HelloWorld.vue

   
   <template>
     <div class="hello">
       <p>Practice</p>
       <div v-html="htmlContent"></div>
     </div>
   </template>
   
   <script>
   export default {
     name: "HelloWorld",
     data() {
       return {
         htmlContent: "",
       };
     },
     mounted: function () {
       this.loadHtml();
     },
     methods: {
       loadHtml() {
         fetch("./html/sample.html").then((res) => {
           res.text().then((html) => {
             this.htmlContent = html;
           });
         });
       },
     },
   };
   </script>
   
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped>
   h3 {
     margin: 40px 0 0;
   }
   ul {
     list-style-type: none;
     padding: 0;
   }
   li {
     display: inline-block;
     margin: 0 10px;
   }
   a {
     color: #42b983;
   }
   </style>
   

   肝は
   ＊v-htmlを使用
   ＊dataにv-htmlで使用しているデータhtmlContentを紐づける
   ＊mountedにて、fetch使用のメソッドloadHtmlを読み込む
   ＊methodsにて、メソッドloadHtmlを定義し、fetchで外部htmlを読み込んで、
   　htmlをデータhtmlContentに格納する。

3. fetchメソッドに書いたパス（./html/sample.html）に
   sample.html（＝今回対象となる一部htmlファイル）を格納する。
   ＊publicフォルダの中となる。
   

4. sample.html中は以下のようにstyle, htmlタグを書くことができる。

   sample.html

   <style>
     .text {
       color: red;
     }
   </style>
   
   <div class="text">Hello ! External.htmlだよ！ </div>
   

5. npm run serveコマンドを実行、ブラウザーで確認すると、以下が確認できる。
   

＊npm run buildコマンドを実行しビルドした場合、
　distフォルダ内にhtmlはそのまま格納される。
　（このsample.htmlを直した場合もブラウザーに問題なく反映された。）