vue全局函数引用问题

在vue项目开发中需要将一些通用方法或组件挂载到全局上，那么有几种情况如下：
1.利用Vue的directive添加自定义指令

<div id="app">
    <input type="text" v-focus/>
</div>

main.js中

Vue.directive('focus', {
    inserted: function (el,bind) {
        el.focus();
    }

2.在main.js中将函数扩展到vue实例上

 Vue.prototype.httpData = function (){
  alert('执行成功');
}

在其他组件中调用

this.httpData();

3.在main.js中引入自己写好的文件http.js
http.js文件中

exports.install = function (Vue) {
  Vue.prototype.http = function (){
    alert('执行成功');
  };
};

main.js中

import http from './http'
Vue.use(http);

在其他组件中调用

this.http();

我的需求是将所有接口放在http.js中统一管理，所以用的第三种方式，还遇到一个小问题

image.png
当我的文件名为http.js时，会报一个错误：
Uncaught ReferenceError: exports is not defined image.png
但我把http.js重命名之后又不报了，原因在于babel中的.babelrc文件
"modules": false => "modules": true，需要注意

{
  "presets": [
  ["env",
   { "modules": true }
  ]]
}