Javascript Vue+webpack+vue-loader 项目中如何从不同的js文件中导入函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43608457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to import functions from different js file in a Vue+webpack+vue-loader project
提问by Manish Patel
(See end for why this is not a dupe of How do I include a JavaScript file in another JavaScript file?)
（有关为什么这不是如何在另一个 JavaScript 文件中包含 JavaScript 文件？）
Javascipt + Vue + webpack + vue-loader noob... stumbling on the simplest of things!
Javascipt + Vue + webpack + vue-loader 菜鸟......在最简单的事情上磕磕绊绊！
I have App.vuewhich has a template:
我有App.vue一个模板：
<template>
<div id="app">
<login v-if="isTokenAvailable()"></login>
</div>
</template>
I've declared the isTokenAvailablemethod in the normal way for Vue inside methods. It uses a function that I wrote in a separate jsfile:
我已经isTokenAvailable在 Vue 中以正常方式声明了该方法methods。它使用我在单独js文件中编写的函数：
<script>
import * as mylib from './mylib';
export default {
....
methods:{
isTokenAvailable: () => {
return mylib.myfunc();
}
}
}
</script>
mylibstarts like this:
mylib像这样开始：
import models from './model/models'
import axois from 'axios'
export default function() {
// functions and constants
}
When I run the project, I get this below warning:
当我运行该项目时，我收到以下警告：
export 'myfunc' (imported as 'mylib') was not found in './mylib'
I gather I'm not importing or declaring a javascript module correctly... but there seem to be so many ways to do it, added with the complexity of the scoping in Vue, I'm not sure what is the right way to do it?
我认为我没有正确导入或声明 javascript 模块……但是似乎有很多方法可以做到，再加上 Vue 范围界定的复杂性，我不确定什么是正确的方法它？
Thanks in advance.
提前致谢。
Why this isn't a dupe of: How do I include a JavaScript file in another JavaScript file?
为什么这不是重复：如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？
Doesn't seem to fix the problem, specifically in the context of vuejs.
似乎没有解决问题，特别是在 vuejs 的上下文中。
I have tried this:
我试过这个：
<script>
const mylib = require('./mylib');
...
</script>
With the function modified to: exports.myfunc = function()
将函数修改为： exports.myfunc = function()
Should I have some other dependency for this to work?Because I get a different error:
我应该有其他一些依赖才能让它工作吗？因为我得到了一个不同的错误：
[Vue warn]: Error in render function:
TypeError: mylib.myfunc is not a function
回答by anacrust
Say I want to import data into a component from src/mylib.js:
假设我想从以下位置将数据导入到组件中src/mylib.js：
var test = {
foo () { console.log('foo') },
bar () { console.log('bar') },
baz () { console.log('baz') }
}
export default test
In my .Vue file I simply imported testfrom src/mylib.js:
在我的 .Vue 文件中，我只是test从src/mylib.js以下位置导入：
<script>
import test from '@/mylib'
console.log(test.foo())
...
</script>
回答by Manish Patel
After a few hours of messing around I eventually got something that works, partially answered in a similar issue here: How do I include a JavaScript file in another JavaScript file?
经过几个小时的混乱，我最终得到了一些有用的东西，在这里的一个类似问题中得到了部分回答：如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？
BUTthere was an import that was screwing the rest of it up:
但是有一个导入将其余部分搞砸了：
Use require in .vuefiles
在.vue文件中使用 require
<script>
var mylib = require('./mylib');
export default {
....
Exports in mylib
出口 mylib
exports.myfunc = () => {....}
Avoid import
避免 import
The actual issue in my case (which I didn't think was relevant!) was that mylib.jswas itself using other dependencies. The resulting error seems to have nothing to do with this, and there was no transpiling error from webpackbut anyway I had:
在我的案例中（我认为这无关紧要！）的实际问题mylib.js是它本身使用了其他依赖项。由此产生的错误似乎与此无关，并且没有任何转换错误，webpack但无论如何我有：
import models from './model/models'
import axios from 'axios'
This works so long as I'm not using mylibin a .vuecomponent. However as soon as I use mylibthere, the error described in this issue arises.
只要我不在组件中使用mylib，这就会起作用.vue。但是，一旦我mylib在那里使用，就会出现此问题中描述的错误。
I changed to:
我改为：
let models = require('./model/models');
let axios = require('axios');
And all works as expected.
一切都按预期工作。
回答by Johnny Driesen
I like the answer of Anacrust, though, by the fact "console.log" is executed twice, I would like to do a small update for src/mylib.js:
我喜欢 Anacust 的答案，不过，由于“console.log”被执行了两次，我想对以下内容做一个小更新src/mylib.js：
let test = {
foo () { return 'foo' },
bar () { return 'bar' },
baz () { return 'baz' }
}
export default test
All other code remains the same...
所有其他代码保持不变......
