Vue配置全局函數

方法1：通過Vue.prototype實現

注冊全局函數

import utils from './utils/Utils'
Vue.prototype.$utils = utils
// 或者直接
Vue.prototype.changeData = function (){//changeData是函數名
  alert('執行成功');
}

頁面使用

//直接通過this運行函數
this.$utils.xxx
// 或者
this.changeData();

缺點：

綁定的東西多了會使vue實例過大
每次使用都要加上this

優點：

定義簡單

方法2：使用use，將全局函數當做插件來進行注冊

js函數文件

exports.install = function (Vue, options) {
   Vue.prototype.text1 = function (){//全局函數1
      alert('執行成功1');
   };
   Vue.prototype.text2 = function (){//全局函數2
      alert('執行成功2');
   };
};

main.js中

import base from './base'//引用
Vue.use(base);//將全局函數當做插件來進行注冊

使用

this.text1();
this.text2();

方法3：使用webpack.ProvidePlugin全局引入

vue.config.js配置

首先在vue.config中引入webpack和path，然后在module.exports的configureWebpack對象中定義plugins，引入你需要的js文件
完整的vue.config.js配置如下：

const webpack = require('webpack')
const path = require("path")

module.exports = {
    .......
    configureWebpack: {
        .........
        plugins: [
            new webpack.ProvidePlugin({
                ROLE: path.resolve(__dirname, './src/utils/role.js') // 定義的全局函數類
            })
        ]
    }
}

對於 ES2015 模塊的 default export，你必須指定模塊的 default 屬性：

new webpack.ProvidePlugin({
  identifier: ['module-name', 'property'],
  // ...etc.
});

示例：

new webpack.ProvidePlugin({
  ROLE: [path.resolve(__dirname, './src/utils/role.js'), 'default'], 
});

也就是通過標記default，webpack編譯的時候就只識別export default導出的函數；如果不標記，那就也識別export導出函數

.eslintrc.js文件配置

加入一個globals對象，把定義的全局函數類的屬性名啟用一下，不然會報錯找不到該屬性。

module.exports = {
  "globals":{
    "ROLE": true,
  }
}

使用

重啟項目，然后調用
ROLE.hasRole()

缺點：

該方法中如果導出的是一個動態值
export const userRoles = return rolesStore.get().map(item => item.roleName)
那么rolesStore的變化，不會導致userRoles的變化
如果想要userRoles隨時隨地都能獲取最新的值，那么可以將上面變量改成函數即可，因為函數在被調用的時候會重新執行，從而獲取最新的值。

export const userRoles = () => {
    return rolesStore.get().map(item => item.roleName)
}

如果函數內部使用的也是該頁面的動態變量，比如rolesStore，那么也需要將rolesStore改成函數形式調用。
猜想原因：該全局函數方法使用的是靜態模式，不會重復賦值一個變量，但是函數在被調用的時候會重新執行。

優點：

利於團隊開發
不用到處import或者require

來源

1.https://blog.csdn.net/pdd11997110103/article/details/120237458
2.https://www.cnblogs.com/jserhub/p/11671780.html