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'在您的组件中

让我们知道是否有帮助

实现npm包自定义组件VueJS

1 个答案: