vuex 스토어는 개발 서버에서 작동하지만 운영 빌드에서는 작동하지 않습니다.

vuex 스토어는 개발 서버에서 작동하지만 운영 빌드에서는 작동하지 않습니다.

자산 디렉토리의 다른 파일에 두 개의 javascript 오브젝트가 있습니다.둘 다 내 store.js 파일로 Import해야 합니다.

내 스토어의 관련 부품.js

import Vue from 'vue'
import Vuex from 'vuex'
import pathify from 'vuex-pathify'
import {make} from 'vuex-pathify'
import requiredParam from '@/assets/requiredParameters.js'
import optionalParam from '@/assets/optionalParameters.js'

Vue.use(Vuex);

var rp = JSON.parse(JSON.stringify(requiredParam));
var op = JSON.parse(JSON.stringify(optionalParam));

console.log(requiredParam,optionalParam);
console.log(rp,op);

var state = {
    requiredParam: rp,
    optionalParam: op,
    jobId: null,
    jobHistory: null,
    jobStatus: null,
    messages: [],
    geocodeReq: null,
    geocodeModal: false,
};
console.log(state)

const mutations = make.mutations(state);

export default new Vuex.Store({
  plugins: [pathify.plugin],
  state,
  mutations,

  getters: {
    orderLen: (state)=>{
        console.log(state)
        return Object.keys(state.requiredParam.Order).length
    },

    depotLen: (state)=>{
        return Object.keys(state.requiredParam.Depot).length
    },

    routeLen: (state)=>{
        return Object.keys(state.requiredParam.Route).length
    },

  },


})

Vue CLI 3 dev 서버에서는 모든 것이 정상적으로 동작합니다.빌드를 실행하여 프로덕션 빌드의 콘솔을 보면 상태가 기록될 때까지 모든 것이 올바르게 표시됩니다.콘솔에 rp와 op이 올바르게 기록되어 있어도 필수 param과 옵션 param은 모두 정의되어 있지 않습니다.

웹 팩과 관련이 있는 것은 알고 있습니다만, 한 번도 사용해 본 적이 없기 때문에, 왜 이런 일이 일어나는지는 잘 모르겠습니다.

이 문제에 대한 해결책이나 더 나은 접근 방법이 있습니까?

오브젝트는 javascript 지식이 거의 없는 다른 사용자에 의해 편집되기 때문에 각각의 파일에 존재해야 합니다.

원래 파일은 이었습니다.JSON이랑 저는

var state = {
    requiredParam: require('@/assets/requiredParameters.json'),
    optionalParam: require('@/assets/optionalParameters.json'),
    jobId: null,
    jobHistory: null,
    jobStatus: null,
    messages: [],
    geocodeReq: null,
    geocodeModal: false,
};

그러나 웹 팩이 자산 폴더에 파일을 올바르게 포함하지 않았기 때문에 작동하지 않았습니다.

문제를 발견했어요. 사실 웹 팩과는 전혀 관련이 없고 알아내는 데 시간이 오래 걸렸어요.

프로덕션 서버는 이전 버전의 앱을 호스팅하는 데 사용된 github 페이지 리포에서 호스팅되고 있었습니다.

이전 버전에서 아직 남아 있는 현재 버전이 사용하는 변수와 이름이 같은 localStorage 변수가 있습니다.

이로 인해 스토어 값이 정의되지 않은 값으로 설정되었습니다.콘솔 로그는 스토어에 대한 참조만 기록하기 때문에 값을 확인했을 때는 이미 null로 덮어쓰고 있었습니다.

언급URL : https://stackoverflow.com/questions/53714424/vuex-store-works-in-dev-server-but-not-in-production-build