如何在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

经过几个小时的折腾，我终于得到了一些有用的东西，在这里的类似问题中得到了部分回答：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');

一切都按预期工作。

Answer 2

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

Answer 3

我喜欢 Anacrust 的回答，不过，事实上 "console.log" 执行了两次，我想对 src/mylib.js 做一个小更新：

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

export default test

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

Answer 4

我试图组织我的 vue 应用程序代码，遇到了这个问题，因为我的组件中有很多逻辑并且不能使用其他 sub-coponents，所以在中使用许多功能是有意义的一个单独的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 经验后，我发现您也可以使用 mixins 将您的代码拆分到不同的文件中，并使编码和维护更容易，请参阅 https://vuejs.org/v2/guide/mixins.html

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

How to import functions from different js file in a Vue+webpack+vue-loader project

javascript

module

webpack

vue-loader

vuejs2

在 `.vue` 个文件中使用 require

出口 `mylib`

避免`import`

编辑

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

How to import functions from different js file in a Vue+webpack+vue-loader project

javascript

module

webpack

vue-loader

vuejs2

在 .vue 个文件中使用 require

出口 mylib

避免import

编辑

在 `.vue` 个文件中使用 require

出口 `mylib`

避免`import`