vue template 如何优雅的访问 window 全局变量？

Question

模板文件 index.html:

<script>
   var gABC = 'abc'
</script>

<div id="app"></div>

template:

<template>
    <!-- 这里如何读取到 gABC？ -->
    <div> {{ gABC }} </div>
</template>

Answer 1

将全局中的gABC 在 组件的data函数中，赋值给this，就可以在模板中使用。
这种方式尽量少用

export default {
    data () {
        this.gABC = window.gABC;
        return {}
    }
}

优雅升级版：使用mixin

Answer 2

window.gABC 

Answer 3

// public/index.html
<script>
  var globalA = "11212"
</script>
<noscript>
  <strong>We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->

注意全局变量必须放在插入的build后的js之前

接着就可以直接在xx.vue文件中直接访问

// xx.vue

console.log(golbalA)

但我不推荐这种写法，之前我也是在别人项目中看到这种写法，导致我奇怪为什么变量明明没声明就可以使用，后来全局搜索才知道，建议考虑放在vuex中