使用 Laravel Mix 将 JavaScript 类导入 Vue 单文件组件

Question

我正在我的项目中编写一个Vue单页组件，该组件使用Laravel Mix捆绑在一起。我想将一些逻辑提取到它自己的类中，以便它可以轻松地在其他组件中重用（但这不是应该成为 Vue 组件本身的逻辑）。

我创建了一个新类并将其放在 TimeRangeConverter.js 中，与我的 Vue 组件位于同一目录中。

export default class TimeRangeConverter {
    static getFromTimestamp() {
        return 1;
    }
}

在我的组件中，我像往常一样导入它：

<template>
    <div>
        Example component
    </div>
</template>
<script>
    import './TimeRangeConverter';
    export default {
        mounted() {
            console.log(TimeRangeConverter.getToTimestamp());
        }
    }
</script>

但是 Vue 抛出了一个错误，说ReferenceError: TimeRangeConverter is not defined.

我使用的是Laravel 5.7附带的默认webpack.mix.js配置文件：

mix.js('resources/js/app.js', 'public/js');

在我的主app.js文件中，我会自动包含 Vue 组件：

const files = require.context('./', true, /.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

将此类导入 Vue 组件以供使用的正确方法是什么？

Answer 1

您应该使用以下语法在组件代码中导入类：

 import TimeRangeConverter from './TimeRangeConverter';