无法将 ES6 模块导入 Vue 单文件组件

Question

我正在学习（修补）ES6 模块和 Vue.js，单文件组件 (SFC)。我通过 webpack-simple 模板使用 Vue CLI 构建了我的项目。我在“settings.mainAlarm.name”行收到错误“TypeError：无法读取未定义的属性“名称””。 “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/settings.js 文件：

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;
}

Answer 1

您的设置文件应如下所示

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>

我希望这是您真正想要的第一个选项（我不确定为什么每次使用设置时都需要一个唯一的设置对象，这就是您问题中的代码会做的） .