如何在vue.js中从多个路径导入使用相同名称的组件或utils

Question

项目结构看起来像

- src
- business
- sales
- views
- components
- filter.js
- router.js
- ...
- marketing
- views
- components
- filter.js
- router.js
- ...
- App.vue
- main.js
- ...

main.js看起来像

import filter from "@sales/filter";
import filter from "@marketing/filter";
Vue.use(filter);
import router from "@sales/router";
import router from "@marketing/router";
Vue.use(filter);
...

然后我出现语法错误标识符"filter"已声明，标识符"router"已声明

如何在vue.js中从多个路径导入使用相同名称的过滤器、路由器或常见事物？

Answer 1

这与javascript导入有关，唯一的选择是将要导入的文件中导入元素的名称重命名为

如果你有默认导出，你可以直接重命名它们，比如：

import salesFilter from "@sales/filter";
import marketingFilter from "@marketing/filter";
Vue.use(salesFilter);
Vue.use(marketingFilter);

如果您已命名出口

import { filter as salesFilter } from "@sales/filter";
import { filter as marketingFilter } from "@marketing/filter";
Vue.use(salesFilter);
Vue.use(marketingFilter);

Answer 2

您可以重命名其中一个导入的函数，如：

import filter from "@sales/filter";
import {default as filter1 } from "@marketing/filter";
Vue.use(filter);
Vue.use(filter1);