Question

我正在学习（修补）ES6模块和Vue.js，单个文件组件（SFC）。我通过webpack-simple模板使用Vue CLI构建了我的项目。我收到错误＆＃34; TypeError：无法读取属性＆＃39; name＆＃39;未定义＆＃34;在＆＃34; settings.mainAlarm.name＆＃34;的行上。＆＃34; npm run dev＆＃34;不会抛出任何错误所以我相信构建步骤是找到（并且可能忽略）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>

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

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

1 个答案: