

vue.jsでwebアプリの開発を行っています。  
firebase-hostingにアップロードするため、npm run generate を実行しました。  
distフォルダにhtmlファイルが生成されるのですが、一部分だけがhtmlに反映されません。  
具体的には`v-stepper-content`のstep1,step2は変更されますが、step3,step4が変更されません。  
`npm run dev`を実行し、local環境では問題なく表示されます。

_画像の説明_  
27行目辺り→ **野菜の名前** という日本語が表示されている  
31~34が本来step3の内容が表示されるはず。 **単位▽** や _円_ といった情報が表示されるはず…？

`npm run generate`した際の出力先は **nuxt.config.js** で **dist** フォルダに指定しています。

[code]

    <v-stepper-content step="2" class="pa-3">
            <v-card>
              <v-row
                v-for="item in newvegenamelist"
                :key="item.id">
                <v-col cols="12">
                  <v-text-field
                    v-model="item.name"
                    label="野菜の名前"></v-text-field>
                </v-col>
              </v-row>
              <v-row>
                <v-col cols="6"></v-col>
                <v-col cols="3" class="pr-1">
                  <v-btn
                    @click="addInput"
                    width="100%"
                    color="grey">
                    <v-icon dark>
                      mdi-plus
                    </v-icon>
                  </v-btn>
                </v-col>
                <v-col cols="3" class="pl-1">
                  <v-btn
                    @click="removeInput"
                    width="100%"
                    color="grey">
                    <v-icon dark>
                      mdi-minus
                    </v-icon>
                  </v-btn>
                </v-col>
              </v-row>
    
              略
            </v-card>
          </v-stepper-content>
    
    <v-stepper-content step="3" class="pa-3">
            <div class="item-list">
              <v-card
                v-for="(item, index) in mergeList"
                :key="item"
                outlined
                color="grey lighten-3"
                style="margin-bottom: 2vh;">
                <v-row>
                  <v-col cols="12" class="center" style="padding-bottom: 0; margin-top: 1vh;">{{ item }}</v-col>
                </v-row>
                <v-row>
                  <v-col cols="4" class="pr-0">
                    <input
                      @change="inputunitplice(index)"
                      type="text"
                      placeholder="単価"
                      inputmode="numeric"
                      pattern="^[1-9][0-9]*$"
                      class="center"
                      style="width: inherit;">
                  </v-col>
                  <v-col cols="2" class="pl-0" style="text-align: center;">
                    <select @change="inputunit(index)">
                      <option disabled selected value="default">単位∇</option>
                      <option
                        v-for="item in unitItems"
                        :value="item"
                        :key="item"
                        class="center"
                      >{{ item }}
                      </option>
                    </select>
                  </v-col>
                  <v-col cols="4" class="pr-0">
                    <input
                      @change="inputplice(index)"
                      type="text"
                      placeholder="金額"
                      inputmode="numeric"
                      pattern="^[1-9][0-9]*$"
                      class="center"
                      style="width: inherit;">
                  </v-col>
                  <v-col cols="2" class="pl-0">
                    <p style="margin-bottom: 0;">円</p>
                  </v-col>
                </v-row>
              </v-card>
            </div> 
    
          </v-stepper-content>
    
[/code]

[![

27行目辺り→野菜の名前という日本語が表示されている

31~34が本来step3の内容が表示されるはず。単位▽や円といった情報が表示されるはず…？

](https://i.stack.imgur.com/gCir3.png)](https://i.stack.imgur.com/gCir3.png)


CC BY-SA 4.0
2023-05-26T02:31:10.467
94983
2023-05-26T02:31:10.467
58426
question
html vue.js npm nuxt.js
npm run generate した際に dist フォルダ内の html ファイルが変更されない