首页 > 解决方案 > 如何使用与主应用程序相同的 vue 实例安装 vue 插件

问题描述

使用vue-sfc-rollup创建的 Vue 组件有这部分安装代码,我无法访问。

// To auto-install on non-es builds, when vue is found
// eslint-disable-next-line no-redeclare
/* global window, global */
if ('false' === process.env.ES_BUILD) {
  let GlobalVue = null;
  if (typeof window !== 'undefined') {
    GlobalVue = window.Vue;
  } else if (typeof global !== 'undefined') {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    GlobalVue = (global as any).Vue;
  }
  if (GlobalVue) {
    // ***********
    //
    // NEVER REACH
    //
    // ***********
    (GlobalVue as typeof _Vue).use(plugin);
  }
}

我试过这个

const global: any = window
global.Vue = Vue

或这个

const global: any = window

const vm = new Vue({
  render: (h): VNode => h(Dev),
}).$mount('#app');

global.Vue = vm

但是安装插件时全局 vue不可用

我问是因为如果我在插件中使用类组件

@Component
export default class TheComponent extends Vue {

然后我在主应用程序中收到此警告:

vue.runtime.esm.js
[Vue 警告]:$attrs 是只读的。
[Vue 警告]:$listeners 是只读的。

我认为这是因为该组件安装在 vue 的不同实例上。

编辑:当然我以这种方式安装插件

Vue.use(TheComponent)

标签: vue.jsvuejs2vue-componentrollupjs

解决方案


推荐阅读