Question

我已经四处寻找，但没有找到一个如何完成此工作的实例。基本上，我试图连接一个外部JS文件（用JS编写）并尝试使用它来调用它的函数。

<script src="/static/medium-editor.min.js"></script>

<script>


export default {
name: 'App',

mounted: function() {
    var editor = new MediumEditor('.editable', {
        toolbar: {
            buttons: ['bold', 'italic', 'underline', 'anchor']
        }
    });
    console.log('testing...')
}

}
</script>

该文件似乎正常加载，但我收到此错误

ReferenceError: MediumEditor is not defined

我也试过使用import MediumEditor，但我认为我们必须将它导出到其他js文件中，这个文件也不行。

作为参考，我正在尝试将此插件添加到我的vuejs测试项目中：https://github.com/yabwe/medium-editor/blob/master/dist/js/medium-editor.js

如果有人知道我们如何在VueJS中调用该外部函数并使其工作，我将非常感激。我是初学者，但我整天都在搜索，但没有找到类似的解决方案。

提前致谢

钱德拉

更新：添加了JSFiddle，如果您想尝试：https://jsfiddle.net/maharzan/nze45uxf/2/

Answer 1

您不必使用script标记导入文件，只需使用import语句即可。

<script>

    import MediumEditor from '/static/medium-editor.min.js'

    export default {
        name: 'App',

        mounted: function() {
            var editor = new MediumEditor('.editable', {
                toolbar: {
                buttons: ['bold', 'italic', 'underline', 'anchor']
            });
            console.log('testing...')
        }
    }

</script>

更新： -

如果使用module.exports导出该函数，则使用import语句导入该函数会出现错误Cannot assign to read-only property 'exports' of object '#<Object>。为了防止它使用export default导出函数。

请参阅： - https://github.com/webpack/webpack/issues/4039

在VueJS中调用外部库函数

1 个答案:

更新： -