json - vuex 商店可以在开发服务器中使用，但不能在生产版本中使用

Question

我有两个(大)javascript 对象，它们位于我的资源目录中的单独文件中。它们都需要导入到我的 store.js 文件中。

我的store.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 开发服务器中一切都工作得很好。 当我运行构建并查看生产构建的控制台时，一切看起来都是正确的，直到记录状态为止。即使 rp 和 op 正确记录在控制台中，必需的参数和可选的参数都未定义。

我知道这与 webpack 有关，但我以前从未使用过它，所以我不确定为什么会发生这种情况。

是否有解决方案或更好的方法来解决该问题？

对象需要位于单独的文件中，因为它们将由具有很少 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,
};

但这不起作用，因为 webpack 没有将文件正确包含在 Assets 文件夹中。

Answer 1

我发现了这个问题，它实际上与 webpack 无关，并且花了我很长时间才弄清楚。

生产服务器由 github Page 存储库托管，该存储库用于托管应用程序的早期版本。

有一个 localStorage 变量仍然是以前版本遗留下来的，它与当前版本使用的变量同名。

这导致存储值被设置为未定义的值，并且由于控制台日志仅记录对存储的引用，因此当我看到该值时，它已经被 null 覆盖。