ES6 모듈을 Vue 단일 파일 구성 요소로 가져올 수 없음

ES6 모듈을 Vue 단일 파일 구성 요소로 가져올 수 없음

ES6 모듈과 Vue.js, 싱글 파일 컴포넌트(SFC)를 배우고 있습니다.웹 팩 심플 템플릿을 사용하여 Vue CLI를 사용하여 프로젝트를 구축했습니다."settings.mainAlarm.name" 행에 "TypeError: Cannot read property 'name' of undefined" 라는 오류가 나타납니다."npm run dev"는 오류를 발생시키지 않기 때문에 빌드 스텝은 settings.js 파일을 검색(또는 무시)하고 있다고 생각합니다.재사용 가능한 JavaScript를 Vue SFC로 가져오는 가장 좋은 방법은 무엇입니까?

Root.vue 파일:

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <h4>{{ alarmName }}</h4>
  </div>
</template>

<script>
  //const settings =  mainAlarm;
  import settings from './lib/settings.js'

  export default {
    name: 'app',
    data () {
      return {
        msg: 'Welcome to Blah Blah Blah!',
        alarmName: settings.mainAlarm.name
      }
    }
  }
  //console.log(this.alarmName);
</script>

<style>
</style>

./lib/module.module 파일:

export default function () {
    var rtn = {
        mainAlarm: {
            name: "overdueCheckAlarm",
            info: {  delayInMinutes: .01,  periodInMinutes: .25  }
        },
        notificationAudioFile: "ache.mp3",
        baseUrl: "www.xxx.com/xx/xxxx-xxx/"
    }
    return rtn;
}

설정 파일은 다음과 같습니다.

export default {
  mainAlarm: {
    name: "overdueCheckAlarm",
    info: {  delayInMinutes: .01,  periodInMinutes: .25  }
  },
  notificationAudioFile: "ache.mp3",
  baseUrl: "www.xxx.com/xx/xxxx-xxx/"
}

이 경우 컴포넌트가 그대로 동작하거나 컴포넌트가 이렇게 되어 설정 파일을 그대로 둘 수 있습니다.

<script>
  import settings from './lib/settings.js'

  // settings.js exports a function as the default, so you
  // need to *call* that function
  const localSettings = settings()

  export default {
    name: 'app',
    data () {
      return {
        msg: 'Welcome to Blah Blah Blah!',
        alarmName: localSettings.mainAlarm.name
      }
    }
  }
</script>

이것이 당신이 정말로 원하는 첫 번째 옵션이라고 생각합니다(왜 당신이 설정을 사용할 때마다 고유한 설정 개체를 원하는지 잘 모르겠습니다.그것이 질문의 코드입니다).

언급URL : https://stackoverflow.com/questions/48100795/cannot-import-es6-module-into-vue-single-file-component