首页 文章

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

提问于
浏览 次
2

我正在学习（修补）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;
}
javascript vue.js vuejs2 vue-component es6-modules

1 回答

  • 2

    您的设置文件应如下所示

    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>

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

    回复于

相关问题