vuex 商店在开发服务器中工作，但在生产构建中不工作答案

【问题标题】：vuex store works in dev server but not in production buildvuex 商店在开发服务器中工作，但在生产构建中不工作
【发布时间】：2019-05-11 20:52:50
【问题描述】：

我有两个（大）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 文件夹中。

【问题讨论】：

您是否尝试将目录更改为@/mymodules/requiredParameters.json
@BoussadjraBrahim 是的，我尝试了使用导出默认值的 json 文件和 js 文件。两者都在开发服务器中工作，但都在构建中未定义。

标签： json vue.js webpack vuex vue-cli-3

【解决方案1】：

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

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

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

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

【讨论】：