Question

我试图按如下所示全局导入和定义一个库，但是以某种方式它无法识别全局变量。

在main.js中，

import Vue from 'vue'
import App from './App'
import router from './router'
import VueJwtDecode from 'vue-jwt-decode'

Vue.config.productionTip = false
Vue.use(VueJwtDecode)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在Signup.vue中，

...
const payload = VueJwtDecode.decode(res.jwt);
...

，该错误表明未定义VueJwtDecode。

Answer 1

在document中，您需要在组件中使用

this.$jwtDec(res.jwt)

代替

VueJwtDecode.decode(res.jwt);

Answer 2

如果您尝试使用命名为VueJwtDecode的引用，则由于Signup.vue无法理解VueJwtDecode的含义，因此需要在Signup.vue组件中重新导入库。

import VueJwtDecode from 'vue-jwt-decode'
const payload = VueJwtDecode.decode(res.jwt);

但是，由于已全局安装了库，因此已将其安装到Vue实例，这意味着可以从组件内的this上下文中使用它。因此，您也可以从组件上下文访问它，而无需重新导入：

const payload = this.$jwtDec(res.jwt);

全局定义在vue.js中不起作用

2 个答案: