programing

구성 파일을 Vue로 가져오는 방법.JS+Vuex

bestcode 2022. 8. 24. 23:58
반응형

구성 파일을 Vue로 가져오는 방법.JS+Vuex

Vue를 호출하기 전에 main.js 파일에서 설정을 하고 있습니다.

Vue.prototype.$api_url = process.env.NODE_ENV === 'production' ? 'https://api.xxx.com' : 'https://yyy.test:8443'

접속하면 동작합니다.this.$api_url모든 Vue 파일에서.

그러나 store.js(Vuex)에서는 렌더링되는 다른 Vue 인스턴스이므로 액세스할 수 없습니다.this.$api_url.

파일에 설정을 하고,Vue.use(configs.js)?

configs 파일 내에서 변수를 가져오려면 어떻게 해야 합니까?main.js/store.js?

감사합니다.

독립 실행형 config.js 파일을 만들고 해당 파일에서 구성 개체를 내보냅니다.또, 설정이 필요한 장소에 설정을 Import 할 수 있습니다.모든 Vue 구성 요소에 동일한 구성을 제공하려는 경우 Vue의 프로토타입에 할당할 수도 있습니다.

업데이트:

그 방법은 다음과 같습니다.

config.js에서

let config;

if (process.env.NODE_ENV === "production") {
  config = {
    $api_url: "https://api.xxx.com",
    timeoutDuration: 30000,
    someOtherProps: 'xyz'
  };
} else {
  config = {
    $api_url: "https://yyy.test:8443",
    timeoutDuration: 1000,
    someOtherProps: 'abc'
  };
}

export { config }

메인.js로

import { config } from 'config';

Vue.prototype.appConfig = config

사용하다this.appConfig.$api_url.vue 파일에서 사용하는 방법

매장 내.js

import { config } from 'config';

사용하다config.$api_url당신이 원하는 대로

언급URL : https://stackoverflow.com/questions/53057546/how-to-import-a-config-file-into-vue-jsvuex

반응형