Vue 应用程序仅在本地开发中正确呈现 API 数据,而不是在生产构建中(使用 vuex、axios 和 parcel)
Vue app only renders API data correctly in local dev, not in production build (using vuex, axios, and parcel)
我有一个基本的客户端呈现的 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>
s),但出于某种原因生产版本确实如此不知道每个数组对象里面的数据。
此应用的完整源代码在这里,https://github.com/brianzelip/groceries-vue。
主要相关代码(对 API 的 axios 调用,更新 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>
为什么在构建用于生产的应用程序时数据会发生变化?我怎样才能改变这种行为以获得预期的结果?
您应该避免使用自闭标签。
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>
我有一个基本的客户端呈现的 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>
s),但出于某种原因生产版本确实如此不知道每个数组对象里面的数据。
此应用的完整源代码在这里,https://github.com/brianzelip/groceries-vue。
主要相关代码(对 API 的 axios 调用,更新 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>
为什么在构建用于生产的应用程序时数据会发生变化?我怎样才能改变这种行为以获得预期的结果?
您应该避免使用自闭标签。
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>