如何将函数导入 Vue 组件？答案

【问题标题】：How to import a function to a Vue component?如何将函数导入 Vue 组件？
【发布时间】：2019-01-17 07:12:26
【问题描述】：

我正在尝试将单个函数导入到我的 Vue 组件中。我为我的函数创建了一个单独的 js 文件：

randomId.js：

exports.randomId = () => //My function ...

在我的 Vue 组件中，我已经导入了 Random js：

let randomId = require('../functions/randomId');
randomId();

但是 Webpack 会抛出“randomId 不是函数”的错误。我尝试使用导入语法导入文件，但错误仍然存在。

import randomId from '../functions/randomId';

我应该使用其他方法来导入单个函数吗？我对 Webpack 和 JS6 比较陌生。

【问题讨论】：

【解决方案1】：

更改您的功能模块以正确使用 ES6 导出：

export function randomId() { /*My function ...*/ }

然后使用 ES6 命名导入：

import { randomId } from '../functions/randomId';

【讨论】：

【解决方案2】：

如果你想使用 CommonJS，那么在带有你的 randomId 函数的文件中执行以下操作：

function randomId() {
   ...
}

module.exports = randomId;

然后你的 Vue 组件中的 let randomId = require('../functions/randomId'); 就可以工作了。

【讨论】：