Vue 앱은 로컬 개발에서만 API 데이터를 올바르게 렌더링하고 프로덕션 빌드에서는 렌더링하지 않습니다(Vuex, Axios 및 구획 사용).

Vue 앱은 로컬 개발에서만 API 데이터를 올바르게 렌더링하고 프로덕션 빌드에서는 렌더링하지 않습니다(Vuex, Axios 및 구획 사용).

API 엔드포인트에서 json 어레이를 가져와 각 어레이 항목의 데이터를 순서 목록의 목록 항목으로 렌더링하는 기본 클라이언트 측 렌더링 vue 앱이 있습니다.

로컬에서 개발하고 있는 경우 데이터가 예상대로 렌더링됩니다.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 스토어를 업데이트한 다음 순서 목록을 렌더링)는 에 있습니다.이 코드도 여기에 포함됩니다.

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

언급URL : https://stackoverflow.com/questions/52806566/vue-app-only-renders-api-data-correctly-in-local-dev-not-in-production-build-u