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

Question

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

我新建了一个 class 并将其放在 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));

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

Answer 1

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

 import TimeRangeConverter from './TimeRangeConverter';

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

Importing a JavaScript class into a Vue single file component using Laravel Mix

laravel

vue.js

javascript-import

vuejs2

laravel-mix