實現npm包自定義組件VueJS

Question

我正在嘗試使用以下npm-package繞過X幀選項：

https://www.npmjs.com/package/x-frame-bypass

這需要在HTML內插入以下標記：

 <iframe is="x-frame-bypass" src="https://example.org/"></iframe>

當我安裝軟件包時，將以下幾行添加到我的App.js中

import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {xframe} from 'x-frame-bypass' <-- importing the npm package

library.add(faCoffee, faLink, faUser, faSync, faArrowLeft, faPlay, faCheck, faTimes, faEdit, faPause, faStepForward, faCog, faUserCircle, faInfoCircle, faSignOutAlt, faImages)

Vue.use(spatial)
Vue.use(progress)

Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('x-frame-bypass', xframe) <-- adding the xframe component

Vue.config.productionTip = false


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

控制台拋出以下錯誤：

Vue warn: Unknown custom element: <x-frame-bypass> - did you register the component correctly?

因此，我進入了使用iframe的Vue組件，並將其添加到組件中：

import xframe from 'x-frame-bypass'

  export default {
    name: 'Component',
    components: {
      Button,
      'x-frame-bypass': xframe
    },

但隨后控制台顯示以下內容：

Failed to mount component: template or render function not defined.

使之成為可能的正確方法是什么？ 還是無法進行這項工作？

Answer 1

似乎您在語法上犯了一個小錯誤。

為什么import {xframe} from 'x-frame-bypass'根目錄中的import {xframe} from 'x-frame-bypass' import xframe from 'x-frame-bypass'

讓我們知道是否有幫助