vue.js - Vue 应用程序仅在本地开发中正确渲染 API 数据，而不是在生产构建中(使用 vuex、axios 和 Parcel)

Question

我有一个基本的客户端渲染 vue 应用程序，可以获取 a json array from an API endpoint并将每个数组项中的数据呈现为有序列表中的列表项。

当我使用parcel index.pug进行本地开发时，数据按预期呈现。启动我的本地开发环境。这是预期有序列表的屏幕截图，如我的本地开发环境 localhost:1234 所示。 :

但是，当我为生产构建时(使用 parcel build index.pug )，数据不会按预期呈现。以下是生产模式下意外行为的屏幕截图(您可以在 https://errands.netlify.com/ 在线查看):

请注意，生产版本知道获取的 API 数据是一个长度为 6 的数组(因为它渲染出 6 个空 <li> )，但由于某种原因，生产版本不知道每个数组对象内的数据.

这个应用程序的完整源代码在这里，https://github.com/brianzelip/groceries-vue .

主要相关代码(axios 对 API 的调用，更新 vuex 存储，然后渲染出有序列表)位于 TheGroceryForm.vue ，也包含在这里:

<template>
  <form action="/submit" method="POST">
    <ol class="list-reset border rounded">
      <li class="item" v-for="item in allGroceryItems" v-bind:key="item._id">
        <GroceryFormItemEditLink/>
        <GroceryFormItemCheckboxInput :slug="item.slug"/>
        <GroceryFormItemCheckboxLabel :slug="item.slug" :name="item.name"/>
        <GroceryFormItemQtySelector :slug="item.slug"/>
        <GroceryFormItemStoresSelector
          :stores="item.stores"
          :slug="item.slug"
          :defaultStore="item.defaultStore"/>
      </li>
    </ol>
  </form>
</template>

<script>
import axios from 'axios';

import GroceryFormItemEditLink from './GroceryFormItemEditLink.vue';
import GroceryFormItemCheckboxInput from './GroceryFormItemCheckboxInput.vue';
import GroceryFormItemCheckboxLabel from './GroceryFormItemCheckboxLabel.vue';
import GroceryFormItemQtySelector from './GroceryFormItemQtySelector.vue';
import GroceryFormItemStoresSelector from './GroceryFormItemStoresSelector.vue';

export default {
  data() {
    return {};
  },
  components: {
    GroceryFormItemEditLink,
    GroceryFormItemCheckboxInput,
    GroceryFormItemCheckboxLabel,
    GroceryFormItemQtySelector,
    GroceryFormItemStoresSelector
  },
  computed: {
    allGroceryItems() {
      return this.$store.state.allGroceryItems;
    },
    allGroceryItemsCount() {
      return this.$store.getters.allGroceryItemsCount;
    }
  },
  getters: {},
  created() {
    axios
      .get('https://groceries-vue-api.glitch.me/get')
      .then(res => {
        console.log('axio.get worked! res.data =', res.data);
        console.log(`typeof res.data = ${typeof res.data}`);

        const groceryData = res.data;
        console.log('groceryData =', groceryData);
        console.log(`typeof groceryData = ${typeof groceryData}`);

        const newData = res.data.map(obj => obj);
        console.log('newData', newData);
        return newData;
      })
      .then(data => {
        console.log('data from second then() =', data);
        return data;
      })
      .then(data => (this.$store.state.allGroceryItems = data))
      .catch(error => {
        console.log('ERROR! ->', error);
      });
  }
};
</script>

为什么当我构建生产应用程序时数据会发生变化？我怎样才能改变这种行为以获得预期的结果？

Answer 1

您应该避免使用自关闭标签。

https://github.com/vuejs/vue/issues/1036

所以你的TheGroceryForm.vue将是

<template>
    <form action="/submit" method="POST">
        <ol class="list-reset border rounded">
            <li class="item" v-for="item in allGroceryItems" v-bind:key="item._id">
        <GroceryFormItemEditLink></GroceryFormItemEditLink>
        <GroceryFormItemCheckboxInput :slug="item.slug"></GroceryFormItemCheckboxInput>
        <GroceryFormItemCheckboxLabel :slug="item.slug" :name="item.name"></GroceryFormItemCheckboxLabel>
        <GroceryFormItemQtySelector :slug="item.slug"></GroceryFormItemQtySelector>
        <GroceryFormItemStoresSelector
          :stores="item.stores"
          :slug="item.slug"
          :defaultStore="item.defaultStore"></GroceryFormItemStoresSelector>

      </li>
    </ol>
  </form>
</template>