VueJS 插件冲突

Question

我在由 Vue CLI 4 提供支持的 VueJS 应用程序中创建了两个插件，但是当我尝试在我的页面中使用它时，只有一个可以工作

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

axios.vue

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

身份验证.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;

说明.vue

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

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

做记录

• 上面的输出将仅为“Dean Armada”并且console.log(this.$name)未定义
• 但是，如果我注释掉Vue.use(axios)了console.log(this.$name)将努力使其输出将是“克里斯Guinto”，另一种是不明确的，因为axios插件未激活

那么我怎样才能让它们同时工作呢？

Answer 1

也许尝试使用以下方法稍微简化它？

// 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)
})