(为什么这不是 https://stackoverflow.com/questions/950087 的复制品,请见末尾)
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 的作用域非常复杂,我不确定什么才是正确的方法。
在此先表示感谢
为什么这不是 https://stackoverflow.com/questions/950087 的重复?
似乎无法解决问题,特别是在 vuejs 的情况下。
我试过以下方法:
<script>
const mylib = require('./mylib');
...
</script>
将函数修改为exports.myfunc = function()
**因为我得到了一个不同的错误:
[Vue warn]: Error in render function:
TypeError: mylib.myfunc is not a function
假设我想从 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>
经过几个小时的折腾,我最终找到了一个可以正常工作的方法,在这里的类似问题中得到了部分回答: https://stackoverflow.com/questions/950087/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');
结果一切正常。