Question

我在Vue-cli中使用Facebook登录，但显示未定义'FB'。

我将代码分为两个文件：application.js和app.vue

./ assets / js / application.js

// Facebook Login
(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "https://connect.facebook.net/zh_TW/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

App.vue

mounted: function(){
    window.fbAsyncInit = function() {
    FB.init({
      appId      : '<appID>',
      cookie     : true,
      xfbml      : true,
      version    : '{api-version}'
    });
    FB.AppEvents.logPageView();  
    };
  }

main.js

import './assets/js/application.js'
import App from './App.vue'

Answer 1

您的范围内没有FB。您需要从要使用的库中导入它，例如

import { FB as VFacebookLogin } from 'vue-facebook-login-component'

我不确定您使用哪个库。我的答案是来自https://github.com/adi518/vue-facebook-login-component

更新

您将代码分为两个文件，这可能是问题的原因。另一个原因可能是您不等它加载完成。因此，您的mounted在加载https://connect.facebook.net/zh_TW/sdk.js之前可以工作。

这是一个很好的例子：

https://github.com/adi518/vue-facebook-login-component/blob/master/src/modules/helpers.js#L7

https://github.com/adi518/vue-facebook-login-component/blob/master/src/modules/helpers.js#L27

https://github.com/adi518/vue-facebook-login-component/blob/master/src/components/FBLogin.Scope.js#L51

function initFbSdk(options) {
  return new Promise(resolve => {
    window.fbAsyncInit = function () {
      const defaults = { cookie: true, xfbml: true }
      options = { ...defaults, ...options }
      window.FB.init(options)
      resolve()
    };
    /* eslint-disable */
    (function (d, s, id) {
      const fjs = d.getElementsByTagName(s)[0]
      if (d.getElementById(id)) { return; }
      const js = d.createElement(s); js.id = id
      js.src = '//connect.facebook.net/zh_TW/sdk.js'
      fjs.parentNode.insertBefore(js, fjs)
    }(document, 'script', 'facebook-jssdk'))
    /* eslint-enable */
  })
}

function getFbSdk(options) {
  return new Promise(async resolve => {
    if (window.FB) {
      resolve(window.FB)
    } else {
      await initFbSdk(options)
      resolve(window.FB)
    }
  })
}

然后您可以将其用作

const sdk = await getFbSdk({ appId, version, options }) //sdk === FB in this case

Facebook登录错误：Vue.js未定义“ FB”

1 个答案: