56

（为什么这不是如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？）

Javascipt + Vue + webpack + vue-loader noob... 遇到最简单的事情！

我有App.vue一个模板：

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

我已经isTokenAvailable以正常方式为 Vue inside 声明了该方法methods。它使用我在单独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 中范围界定的复杂性，我不确定什么是正确的方法做它？

提前致谢。

为什么这不是一个骗局：如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？

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

我试过这个：

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

将功能修改为：exports.myfunc = function()

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

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

4 回答 4

88

假设我想将数据从以下位置导入组件src/mylib.js：

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

export default test

在我的 .Vue 文件中，我只是test从以下位置导入src/mylib.js：

<script> 
  import test from '@/mylib'

  console.log(test.foo())
  ...
</script>
于 2018-03-13T20:43:32.850 回答
38

经过几个小时的折腾，我最终得到了一些有用的东西，在这里的一个类似问题中得到了部分回答：如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？

但是有一个进口把它的其余部分搞砸了：

.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'

只要我不在组件中使用mylib，它就可以工作.vue。但是，一旦我mylib在那里使用，就会出现此问题中描述的错误。

我改为：

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

并且所有工作都按预期进行。

于 2017-04-25T13:55:23.730 回答
10

我喜欢 Anacrust 的回答，不过，由于“console.log”被执行了两次，我想对以下内容做一个小更新src/mylib.js：

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

export default test

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

于 2018-10-13T08:01:08.333 回答
5

我试图组织我的 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 经验后，我发现您也可以使用 mixins 将代码拆分为不同的文件，并使其更易于编码和维护，请参阅https://vuejs.org/v2/guide/mixins.html

于 2020-08-15T22:38:27.553 回答