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

Posted 2023-02-22

【中文标题】无法将 ES6 模块导入 Vue 单文件组件

【英文标题】：Cannot Import ES6 module into Vue single file component

【发布时间】：2018-06-14 12:14:22

【问题描述】：

我正在学习（修补）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;

【问题讨论】：

您导出的是函数而不是对象。

【参考方案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>

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

【讨论】：

谢谢伯特！测试了这两个选项，它们确实有帮助/工作；有意义，因为函数只是一个对象，除非被调用，否则不会做任何事情。下一步是使用组件道具参数化设置......我猜。我正在尝试与 SFC 一起学习 ES6 基础知识……所以我想结合说默认参数，也许让我的头脑围绕解构……冒着爆炸的风险！谢谢大家