Vue.js Vue应用程序仅在本地开发人员中正确呈现API数据，而不是在生产版本中（使用vuex、axios和parcel）

我有一个基本的客户端渲染vue应用程序，它从每个数组项中获取数据，并将其作为有序列表中的列表项进行渲染

当我在本地开发时，使用

parcel index.pug

加速本地开发环境，数据将按预期呈现。下面是一个预期有序列表的屏幕截图，如我的本地开发环境中所示，网址为

localhost:1234

：

但是，当我为生产进行构建时（使用

地块构建索引.pug

），数据并没有按预期呈现。以下是生产模式下意外行为的屏幕截图（您可以在以下网址在线观看）：

请注意，生产版本知道获取的API数据是一个长度为6的数组（因为它呈现出6个空

s），但由于某些原因，生产版本不知道每个数组对象中的数据

此应用程序的完整源代码位于此处

主要相关代码（axios对API的调用，该调用更新vuex存储，然后呈现有序列表）位于中，也包括在这里：

<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>

从“axios”导入axios；
从“./GroceryFormItemEditLink.vue”导入GroceryFormItemEditLink；
从“./GroceryFormItemCheckboxInput.vue”导入GroceryFormItemCheckboxInput；
从“./GroceryFormItemCheckboxLabel.vue”导入GroceryFormItemCheckboxLabel；
从“./GroceryFormItemQtySelector.vue”导入GroceryFormItemQtySelector；
从“./GroceryFormItemStoresSelector.vue”导入GroceryFormItemStoresSelector；
导出默认值{
数据（）{
返回{}；
},
组成部分：{
GroceryFormItemEditLink，
GroceryFormItemCheckboxInput，
杂货店表单CheckboxLabel，
杂货店形式选择者，
杂货店店面选择器
},
计算：{
所有食品杂货店（）{
返回此。$store.state.allGroceryItems；
},
AllGroceryitemspunt（）{
退回此。$store.getters.allgroceryitemsunt；
}
},
获取者：{}，
创建（）{
axios
.get（'https://groceries-vue-api.glitch.me/get')
。然后（res=>{
log（'axio.get worked！res.data='，res.data'）；
log（`typeof res.data=${typeof res.data}`）；
const groceryData=res.data；
log（'groceryData='，groceryData）；
log（`typeof groceryData=${typeof groceryData}`）；
const newData=res.data.map（obj=>obj）；
console.log（'newData'，newData）；
返回新数据；
})
。然后（数据=>{
log（'data from second then（）='，data）；
返回数据；
})
.then（data=>（this.$store.state.allGroceryItems=data））
.catch（错误=>{
log（'ERROR！->'，ERROR）；
});
}
};

---

为什么在我为生产构建应用程序时数据会发生变化？如何改变这种行为以获得预期结果？

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

因此，您的

杂货店表单.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>

我克隆了您的回购协议，使用

地块索引.pug在本地运行时遇到了同样的问题

感谢您的努力@yuriy636。但是我不知道为什么你会得到6个空白列表项，当我在本地运行时，会在列表项中填入数据，如上面的屏幕截图所示。@yuriy636你去的时候会在浏览器中得到json数据吗？是的。我们得到json数据官方风格指南说不是这样的~我欠你一个道歉。我签出了OP的项目并应用了您的更改，它确实有效。一定是和捆绑机和装载机OP使用的有关。SVG仍然存在问题，但我相信您现在已经将OP放在了正确的轨道上，这是一个多么疯狂的问题！我在教程和博客文章中看到了很多自动关闭组件。谢谢你的帮助。您对svg@Phil的看法是正确的，但当我将上述见解应用于该组件时，它仍然不起作用。我得多做点面条。