javascript - 如何在Vue+webpack+vue-loader项目中导入不同js文件的函数

Question

(请参阅结尾了解为什么这不是 How do I include a JavaScript file in another JavaScript file? 的骗局)

Javascipt + Vue + webpack + vue-loader 新手...在最简单的事情上绊倒了!

我有 App.vue，它有一个模板:

    <template>
     <div id="app">
         <login v-if="isTokenAvailable()"></login>
     </div>
    </template>

我已经在 methods 中以 Vue 的正常方式声明了 isTokenAvailable 方法。它使用我在单独的 js 文件中编写的函数:

<script>
    import * as mylib from './mylib';

    export default {
      ....
        methods:{
            isTokenAvailable: () => {
                return mylib.myfunc();
            }
        }
    }
</script>

mylib 是这样开始的:

    import models from './model/models'
    import axois from 'axios'

    export default function() {
        // functions and constants
    }

当我运行项目时，我收到以下警告:

    export 'myfunc' (imported as 'mylib') was not found in './mylib'

我想我没有正确导入或声明 javascript 模块...但似乎有很多方法可以做到这一点，再加上 Vue 中范围界定的复杂性，我不确定什么是正确的怎么办？

提前致谢。

为什么这不是一个骗局:How do I include a JavaScript file in another JavaScript file?

似乎没有解决问题，特别是在 vuejs 的上下文中。

我试过这个:

<script>
    const mylib = require('./mylib');
    ...
</script>

将函数修改为:exports.myfunc = function()

我应该有一些其他的依赖关系才能工作吗？因为我得到了一个不同的错误:

    [Vue warn]: Error in render function:
    TypeError: mylib.myfunc is not a function

Answer 1

假设我想从 src/mylib.js 将数据导入到一个组件中:

var test = {
  foo () { console.log('foo') },
  bar () { console.log('bar') },
  baz () { console.log('baz') }
}

export default test

在我的 .Vue 文件中，我只是从 src/mylib.js 导入了 test:

<script> 
  import test from '@/mylib'

  console.log(test.foo())
  ...
</script>