假设我想将数据从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>

经过几个小时的折腾，我终于得到了一些工作，部分答案在一个类似的问题在这里：How do I include a JavaScript file in another JavaScript file?

但是有一个导入程序把剩下的部分搞砸了：

在.vue文件中使用require

<script>
  var mylib = require('./mylib');
  export default {
  ....

以mylib导出

exports.myfunc = () => {....}

避免import

在我的例子中，实际的问题（我不认为这是相关的！）是mylib.js本身使用了其他依赖项，产生的错误似乎与此无关，并且没有来自webpack的错误，但无论如何我有：

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

只要我没有在.vue组件中使用mylib，这个方法就可以工作，但是一旦我在那里使用mylib，这个问题中描述的错误就会出现。
我改为：

let models = require('./model/models');
let axios = require('axios');

而且一切都按预期工作。

我喜欢Anacrust的答案，但是，由于“console.log”执行了两次，我想对src/mylib.js做一个小的更新：

let test = {
  foo () { return 'foo' },
  bar () { return 'bar' },
  baz () { return 'baz' }
}

export default test

所有其他代码保持不变...

我试图组织我的vue应用程序代码，遇到了这个问题，因为我的组件中有很多逻辑，不能使用其他子组件，所以在单独的js文件中使用许多函数并在vue文件中调用它们是有意义的，所以下面是我的尝试
1)组件（.vue文件）

//MyComponent.vue file
<template>
  <div>
  <div>Hello {{name}}</div>
  <button @click="function_A">Read Name</button>
  <button @click="function_B">Write Name</button>
  <button @click="function_C">Reset</button>
  <div>{{message}}</div>
  </div>
 </template>

<script>
import Mylib from "./Mylib"; // <-- import
export default {
  name: "MyComponent",
  data() {
    return {
      name: "Bob",
      message: "click on the buttons"
    };
  },
  methods: {
    function_A() {
      Mylib.myfuncA(this); // <---read data
    },
    function_B() {
      Mylib.myfuncB(this); // <---write data
    },
    function_C() {
      Mylib.myfuncC(this); // <---write data
    }
  }
};
</script>

2)外部js文件

//Mylib.js
let exports = {};

// this (vue instance) is passed as that , so we
// can read and write data from and to it as we please :)
exports.myfuncA = (that) => {
  that.message =
  "you hit ''myfuncA'' function that is located in Mylib.js  and data.name = " +
    that.name;
};

exports.myfuncB = (that) => {
  that.message =
  "you hit ''myfuncB'' function that is located in Mylib.js and now I will change the name to Nassim";
  that.name = "Nassim"; // <-- change name to Nassim
};

exports.myfuncC = (that) => {
  that.message =
  "you hit ''myfuncC'' function that is located in Mylib.js and now I will change the name back to Bob";
  that.name = "Bob"; // <-- change name to Bob
};

export default exports;

3）查看实际应用：https://codesandbox.io/s/distracted-pare-vuw7i?file=/src/components/MyComponent.vue

编辑

在对Vue有了更多的经验之后，我发现您也可以使用mixin将您的代码拆分到不同的文件中，从而使编码和维护更加容易（参见https://v2.vuejs.org/v2/guide/mixins.html