VueJS 플러그인 충돌

VueJS 플러그인 충돌

Vue CLI 4를 탑재한 VueJs 앱에서 2개의 플러그인을 생성했는데 페이지에서 사용하려고 하면 1개만 작동합니다.

| plugins
|-- axios.vue
|-- authentication.vue

악시오스

import Vue from "vue";

Plugin.install = function(Vue) {
  Vue.prototype.$myName = "Dean Armada";
};

Vue.use(Plugin);

export default Plugin;

인증이 필요합니다.표시하다

import Vue from "vue";

Plugin.install = function(Vue) {
  Vue.prototype.$name = "Chris Guinto";
};

Vue.use(Plugin);

export default Plugin;

main.discloss.main.discloss.

import axios from "./plugins/axios.js";
import authentication from "./plugins/authentication.js";

Vue.use(axios);
Vue.use(authentication);

지침들.표시하다

<template>
  <div>
      Hello World
  </div>
</template>

<script>
  export default {
    created() {
      console.log(this.$name);
      console.log(this.$myName);
    }
  }
</script>

<style lang="scss" scoped>

</style>

메모

• 은 「 Armada와 「Dean Armada」만 .console.log(this.$name)되어 있지 않다
• 만약 .Vue.use(axios)console.log(this.$name)에, 은 「 Guinto는 「Chris Guinto」이기 때문에 않습니다.하다axios되지 않았습니다.

그럼 어떻게 하면 둘 다 동시에 작동시킬 수 있을까요?

다음과 같은 접근방식으로 조금 심플화해 보시겠습니까?

// plugins/axios.js
export default {
    install(Vue){   
        Vue.prototype.$myname = "Dean Armada";
    }
}

// plugins/authentication.js
export default {
    install(Vue){   
        Vue.prototype.$name = "Chris Guinto";
    }
}

// main.js
import axios from "./plugins/axios.js";
import authentication from "./plugins/authentication.js";

Vue.use(axios);
Vue.use(authentication);

new Vue({
  el: '#app',
  render: h => h(App)
})

언급URL : https://stackoverflow.com/questions/60985129/vuejs-plugins-conflict