VueJS应用程序在localhost中工作,但在开发环境中(甚至在生产环境中)也会中断



我的VueJS应用程序(带Vuex(在本地环境中工作没有问题。但是,当我将其部署到开发环境中时。(process.env.NODE_ENV等于"开发"(它在Vuex商店的一个模块中中断。(在这之后,我当然没有部署它来刺激(

上面说我在Vuex商店的modeuleX中导入的服务B是undefined。这是我的项目结构:

src
├── App.vue
├── components
.
.
.
├── services
│   ├── index.js   // file that exports services
│   ├── serviceA.js
│   ├── serviceB.js
│   └── serviceC.js
├── store
│   ├── index.js   // file that exports Vuex store
│   ├── modules
│   │   ├── moduleX.js
│   │   ├── moduleY.js
│   │   └── moduleZ.js
.
.
.

store/index.js:

import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';
import moduleX from './modules/moduleX';
import moduleY from './modules/moduleY';
import moduleZ from './modules/moduleZ';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
moduleX,
moduleY,
moduleZ,
},
plugins: process.env.NODE_ENV !== 'production' ? [createLogger()] : [],
});

services/index.js:

import serviceA from './serviceA';
import serviceB from './serviceB';
import serviceC from './serviceC';
export { serviceA, serviceB, serviceC };

services/serviceC.js(导入store的服务(

import Vue from 'vue';
import { event } from 'vue-analytics';
import store from '@/store';
export default {
sendEvent(evt) {
console.log(store.getters['moduleX/something']);
event(evt);
}
};

services/serviceB.js:

export default {
someMethodB() {
return localStorage.getItem('bProp');
},
};

以下是我如何在store/modules/moduleX.js:中使用它

import { serviceA, serviceB, serviceC } from '@/services';
const defaults = {
aProp: serviceA.someMethodA(), // works
bProp: serviceB.someMethodB(), // NOT WORKING
};
export default {
namespaced: true,
state: { ...defaults },
getters: {
something: true,
},
mutations: {
// use serviceC here with no problem
},
};

服务A和服务C工作良好,但CCD_ 4是CCD_。正因为如此,该应用程序无法构建。

同样,它在localhost中运行良好。知道为什么会发生这种事吗?

您需要从函数中返回一个值。

export default {
someMethodB() {
return localStorage.getItem('bProp'); // *** RETURN HERE ***
},
};

最新更新