Vue项目中导入JavaScript类后调用静态函数提示未定义的问题

这个问题我之前也碰到过，大概率是你的JS类没有正确导出导致的！JS模块不会自动暴露内部定义的类，必须明确添加导出语句，才能在Vue组件里正确导入并使用。

下面分两种常见的导出/导入场景给你说明正确的写法：

场景1：默认导出 + 默认导入 #

如果想用 import className from './fileName.js'; 这种方式导入，你需要在fileName.js的末尾添加默认导出语句：

// fileName.js
class className {
  constructor() { /* ... */ }
  function1() { /* ... */ }
  static function2() { /* ... */ }
}

// 关键：添加默认导出
export default className;

之后在Vue组件里导入后，直接调用静态函数就没问题了：

// Vue组件代码
import className from './fileName.js';

// 正常调用静态函数
className.function2();

场景2：命名导出 + 解构导入 #

如果想用 import { className } from './fileName.js'; 或者 var { className } = require('./fileName.js'); 这种解构方式导入，需要用命名导出的方式：
你可以直接在类定义前加export：

// fileName.js
export class className {
  constructor() { /* ... */ }
  function1() { /* ... */ }
  static function2() { /* ... */ }
}

或者在类定义完成后单独导出：

// fileName.js
class className {
  constructor() { /* ... */ }
  function1() { /* ... */ }
  static function2() { /* ... */ }
}

// 关键：命名导出类
export { className };

之后在Vue组件里解构导入后，就能正常调用静态函数：

// Vue组件代码
import { className } from './fileName.js';
// 或者用require
// var { className } = require('./fileName.js');

className.function2();

要避免的错误写法 #

很多人会不小心写成这种错误导出：

// 错误示例！
export default { className };

这种写法导出的是一个包含className属性的对象，这时候你导入后需要这样调用：className.className.function2()，显然这不是我们想要的，所以一定要避免这种导出方式。

内容的提问来源于stack exchange，提问作者Kutas Tomy