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

【问题标题】：Importing a JavaScript class into a Vue single file component using Laravel Mix使用 Laravel Mix 将 JavaScript 类导入 Vue 单文件组件
【发布时间】：2019-02-02 16:12:49
【问题描述】：

我正在我的项目中编写一个使用Laravel Mix 捆绑的Vue 单页组件。我想将一些逻辑提取到它自己的类中，以便它可以轻松地在其他组件中重用（但这不是应该是 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组件使用的正确方法是什么？

【问题讨论】：

标签： laravel vue.js vuejs2 laravel-mix javascript-import

【解决方案1】：

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

 import TimeRangeConverter from './TimeRangeConverter';

【讨论】：