Vue定义全局变量、全局方法，在.vue文件和.js文件里使用

背景：在.vue后缀名的文件，和.js后缀名的文件里，使用全局变量的语法是不一样的。

.vue模板文件可以直接访问挂载在Vue实例上的全局对象，而普通的.js文件访问不到。

1、 定义全局变量

  const ssoServer = "https://iam.by.gov.cn/idp"; // 生产环境
  const ssoServerLogout = "https://iam.by.gov.cn/apphub/logout"; // 生产环境

  export default
  {
    
    
    ssoServer,
    ssoServerLogout
  }

我这里定义的是常量。变量只是把const换成let，别的都一样。

2、挂载全局变量，main.js是Vue项目的入口文件，在main.js里面把全局变量挂载到Vue实例上。

import global_ from './config/Global' // 这个路径是相对于main.js的相对路径

Vue.prototype.GLOBAL = global_

3、访问全局变量

3.1 通过Vue.prototype对象访问

import Vue from 'vue'

let a = Vue.prototype.GLOBAL.ssoServer

这种写法在.vue文件和.js文件中都可以使用。

3.2 通过this关键字访问

let a = this.GLOBAL.ssoServer

这种写法只能在.vue文件中使用。

.vue模板文件中，this关键字可以访问到Vue.prototype上挂载的所有对象，所以写this就相当于写Vue.prototype。

4、定义全局方法

在任意.js文件里使用export function语法，即可让这个方法变成全局方法。

export function 个人号码加密 (号码) {
    
    
  let length = 号码.length
  if (length < 8) return 号码
  let 开始加密位 = length / 2 - length / 5
  let 结束加密位 = 开始加密位 + length / 3
  let 加密位数 = 结束加密位 - 开始加密位 + 1
  let 加密结果 = 号码.substring(0, 开始加密位)
  for (let i = 0; i < 加密位数; i++) {
    
    
    加密结果 += '*'
  }
  加密结果 += 号码.substring(结束加密位, length)
  return 加密结果
}

5、使用全局方法

在别的.js和.vue文件里面都可以调用到。调用语法是一样的。

import * as common from '@/utils/common' 
// @/utils为路径， common为js文件名

let 身份证号码 = "44132319960617502X"
let 身份证号码加密 = common.个人号码加密(身份证号码)

全局方法不需要挂载在Vue实例上，直接import JS文件就可以访问。