实现npm包自定义组件VueJS

Question

我正在尝试使用以下npm-package来绕过X-frame选项：

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'

如果有帮助，请让我们知道