VUE 全局函数的定义与使用

方 法 一 :

// main.js
Vue.prototype.customFun = function () {
  console.log('hello world')
}

// test.vue
testCustomFun() {
    this.customFun()
}

方 法 二 :

创建 自定义函数模块 myFun.js

exports.install = function(Vue) {
    Vue.prototype.customFun1 = function() {
        console.log('myFun customFun1()');
    };

    Vue.prototype.customFun2 = function() {
        let str_result = 'myFun customFun2()';
        return str_result
    };
}

在 main.js 中导入自定义模块

import myFun from "./utils/myFun"

Vue.use(myFun);

使用

// test.vue
this.customFun1();
console.log(this.customFun2());
// 切记 不要 this.myFun.customFun1(); 要不提示找不到自定义的函数， 不说了说多了都是泪。

如果提示 'exports' is not defined 错误，可以尝试修改项目根目录的 babel.config.js 文件

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset", ["@babel/preset-env",{"modules": "commonjs"}]]
};

方法三 :

myFun.js

export function customFun1() {
    console.log('myFun customFun1()');
};

export function customFun2() {
    let str_result = 'myFun customFun2()';
    return str_result
};

test.vue

import { customFun1 } from "../utils/myFun";
import { customFun2 } from "../utils/myFun";

Test() {
    customFun1();
    console.log(customFun2());
}